CSS Outline

CSS Outline

In this article we will learn about CSS Outline. Outline is drawn outside borders and is drawn around elements. Borders are different from outlines; the difference is shown below,

Understanding Outlines in a web page

Usage of CSS Outline

Outlines in a web page looks the same as border, but it is not. Outline can overlap content. It is the same on all the sides and it is drawn outside the border of the element.

Outline with CSS properties

CSS outline property

The CSS outline property is a shorthand property to set individual properties for outline, such as outline-style, outline-width, and outline-color. Using this property easily set a thick, dash, and dotted outline on an HTML web page,

Let’s see an example,

The above HTML code will give you the following output, wherein different types of outlines can be seen.

CSS Outline Property Example

CSS outline-width property

As the name suggests, the CSS outline-width property specifies the width of the outline. The values you can add for the width can be any of the following: thin, medium, thick or add a specific size.

The above HTML and CSS code will give you the following output, wherein we have set the width of outlines, such as thin, thick, etc.

CSS Outline Width Property Example

CSS outline-color property

Using the CSS outline-color property, you can easily set the color of outline. Set the color using the color name, RGB value, and HEX value. We have discussed before how to set color with CSS.

Let’s see an example, wherein we have set the outline-color of elements using color name, HEX and RGB value,

The above HTML and CSS code will give you the following output, wherein we have set the outline color.

CSS outline color property example

CSS outline-style property

Use the CSS outline-style property to set the style of the outline. With CSS, set any of the following outline-style:

dashed – dashed outline
solid – solid outline
double – double outline
dotted – dotted outline
ridge – ridged outline
inset – inset online
outset –  outset inline
groove – outline carved into a page
none – no outline
hidden – outline is hidden

Let’s see an example including all the different types of outline shown above,

The above HTML and CSS code will give you the following output, wherein we have set the outline style.

CSS outline style property example

CSS outline-offset property

If you want to add more style to your elements text, to make it look appealing and attractive, then use the CSS outline-offset property. Add space between outline and border using this property.

Let’s see an example to learn how to use outline-offset property to add space,

The above HTML and CSS code will give you the following output, wherein we have set 10px outside the border, which adds a space.

CSS outline offset property

CSS Icons
CSS Lists
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment