Using CSS3’s Outline Property

Published July 10, 2016 by saurav.roy.

CSS3’s outline property is one that is often thought to be interchangeable with the border property. Though the two properties are very similar, the outline property can actually be used to place an outline OUTSIDE of a defined border. There are three facets of the outline property: outline-style, outline-color, and outline-width. Outline-style takes a bunch of different values, including: dotted, dashed, double, solid, groove, ridge, inset, outset, none, and hidden. Outline-color will take any color value, and outline-width takes px, cm, em values and the pre-defined values thin, thick, and medium.

Here’s an example of how you can use the outline property in your CSS:

p{
outline-style: inset;
outline-color: #5588ff;
outline-width: thick;
}

Screen Shot 2016-07-10 at 12.25.09 PM

The outline property also takes a shorthand value similar to that of the background property:

p{
outline: thick dashed #5588ff;
}

Screen Shot 2016-07-10 at 12.26.47 PM

And here’s what an outline looks like with a border. You’ll notice how the outline is outside of the border.

p{
outline: thick dashed #5588ff;
border: 4px solid #000;
}

Screen Shot 2016-07-10 at 12.28.53 PM

Share and Enjoy !

0Shares
0 0