Outline

How Can We Help?
< All Topics

Outline

CSS provides the outline property, which allows you to add a visible border-like outline around elements. Outlines are often used to highlight or emphasize elements, such as when an element receives focus or is hovered over. Let’s explore how to use the outline property in CSS.

Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

  • dotted – Defines a dotted outline
  • dashed – Defines a dashed outline
  • solid – Defines a solid outline
  • double – Defines a double outline
  • groove – Defines a 3D grooved outline
  • ridge – Defines a 3D ridged outline
  • inset – Defines a 3D inset outline
  • outset – Defines a 3D outset outline
  • none – Defines no outline
  • hidden – Defines a hidden outline

The following example shows the different outline-style values:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Outline Width

The outline-width property controls the width of the outline. It can have values like thin, medium, thick, or specific measurements in pixels. For example:

input {
  outline-width: 2px;
}

Outline Color

The outline-color property sets the color of the outline. You can specify the color using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation. Here’s an example:

a {
  outline-color: red;
}

div {
  outline-color: #336699;
}

Outline Shorthand

CSS also provides a shorthand property called outline that combines outline-width, outline-style, and outline-color into a single declaration. Here’s an example:

h1 {
  outline: 2px solid red;
}

Outline Offset

The outline-offset property specifies the space between the outline and the element’s border or content. It is useful for controlling the positioning of the outline. For example:

button {
  outline-offset: 5px;
}

Conclusion

CSS outlines allow you to add a visible border-like outline around elements, providing visual emphasis and highlighting. By utilizing properties like outline-style, outline-width, outline-color, and outline-offset, you can customize the appearance and behavior of outlines. Experiment with different styles, widths, colors, and offsets to achieve the desired effects and enhance the interactivity and visual appeal of your web pages.

Table of Contents