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;
}
[/code]

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

tag.

WHAT’S NEXT?

Learn what is really look like Having Margins Around.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below