CSS Outline

Learn about CSS Outline. An 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 on a web page look the same as borders, but it is not. Outlines 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 the outline, such as outline-style, outline-width, and outline-color. Using this property easily set a thick, dashed, 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. Let us see an example:

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 the 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 the 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 outlines 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 the 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 space.

CSS outline offset property

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

We work to create programming tutorials for all.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading