</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

OUTLINE PROPERTY

</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.

</CSS3 Outline Property>

Outline Property

Outline Styles

Example

Other Values

</Outline Shorthand Property>

Outline Shorthand Property