Web Development

CSS Outline

CSS Outline is the section 12 of Beginner’s Guide to CSS.

Do you feel any difference between the words outline and border. After this section you will feel those are two different concepts.

An outline is a line that is drawn around elements to make the element “stand out” from others.

“Wait a minute!!! That’s what the border does!!!”

Yes, that statement is also correct with the border. The fact is, outlines are created outside of the border.

Like as the border, the outline property specify the style, color, and width of an outline. However, the outline property is different from the border property. The outline is not a part of an element’s dimensions. Do you remember the calculation we did in the CSS Box Model. The width of the outline is not effect to the calculation. Which means the element’s total width and height is not affected by the width of the outline.

Let’s do some workout.

Like as the border, this outline property have the same three property values in the same order. The same concepts about the each side is also applied in here like as the border.

Border with Outline

What you see in the green color is the border. In the red color lines outside to the border is the outline.

[code language=”css”] p {
border: 18px solid green;
outline: 4px solid red;

There are lot of nice effects that you can gain by combining both the border and outline with different colors, sizes and different styles.

Border with Dotted Outline

In this shorter section we came across the usage of both border and outline. By using the both we did some wonderful stuff. In the next section we are going through the next CSS Box Model property which is really necessary when make layouts of using



Learn what is really look like Having Margins Around.

About the author

Sandeep Likhar

Sandeep Likhar from India, Blogger, eBook Designer and Founder of LetsDnD. Having 6 years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Comment