The Developer Brains


OUTLINE PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 OUTLINE>





Outline is a line around the elements. It is the part of OUTSIDE the borders. Outline property is used to make the element stand out.



SEE MORE




















</CSS3 Outline Property>

Apply Outline property on your web pages


Outline Property

CSS has the following outline properties:
  • outline-color
  • outline-style
  • outline-width
  • outline-offset
  • outline

{outline-color : orange;}
                  
property          value



	<!DOCTYPE html>
<html>
<body>
<p style="outline-style:orange;">
    TDB Tutorials
</p>
</body>
</html>



Try it Yourself








Outline Styles

If we want to change the style of the outline of an HTML element the we can use CSS3 outline style Property.

Example

{outline-style :  solid;}
                 
property         value

Other Values

  • dotted - Used to define dotted outline
  • solid - Used to define solid outline
  • dashed - Used to define dashed outline
  • double - Used to define double outline
  • outset - Used to define 3D outset outline.
  • groove - Used to define 3D grooved outline.
  • ridge - Used to define 3D ridged outline.
  • inset - Used to define 3D inset outline.
  • none - Used to define no outline
  • hidden - Used to define hidden outline

							
							<!DOCTYPE html>
							<html>
								<head>
									<style>
									.tdb-school{
										background-color:white;
										padding:10px 35px;
										border-style:dotted;
										border-radius:5px}
									</style>
								</head>
							
								<!--Body-->
								<body>
									<button type="submit" class="tdb-school">
									button border properties
									</button>
								</body>
							</html>
							
							

Try it Yourself











</Outline Shorthand Property>

We can also use outline Shorthand Property.


Outline Shorthand Property

If you don't want to write different CSS rules for Outline property then you can use Outline Shorthand property.
{outline  :  color style width}
                
property        value



<!DOCTYPE html>
<html>
	<!--Body-->
	<body>
		<button type="submit" class="tdb-school" 
		style="outline:orange dotted 5px;
		padding:10px 35px;border:solid red 5px">
		button outline property
		</button>
	</body>
</html>


Try it Yourself





















what is the correct way of Outline Shorthand Property?
1. outline: color style height;
2. outline: height style width;
3. outline: width color height;
4. outline: color style width;



Check Now



CSS3 QUIZ







Next: CSS3 Centering Properties


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers