CSS outline-style Customizing Element Outlines

Introduction

The outline-style property in CSS lets you customize the appearance of an element’s outline. Unlike borders, outlines don’t take up space and are drawn outside the element’s border, making them perfect for adding emphasis without affecting layout.

This property offers various styles like dotted, dashed, solid, double, groove, ridge, inset, and outset. These styles help you create visually appealing and user-friendly designs.

Specification

The outline-style property is part of the CSS Basic User Interface Module Level 4 specification. It defines how an element’s outline looks, which is often used to indicate focus or attention.

The specification includes values like auto, none, dotted, dashed, solid, double, groove, ridge, inset, and outset. Each value provides a unique visual effect, helping you create customized and appealing outlines.

Syntax

The outline-style property in CSS defines the style of an element’s outline. Here’s the basic syntax:

outline-style: keyword-value;

Keyword Values

• auto: The browser chooses a custom outline style.
• none: No outline is shown.
• dotted: The outline is a series of dots.
• dashed: The outline is a series of short dashes.
• solid: The outline is a single, continuous line.
• double: The outline has two parallel lines.
• groove: The outline looks carved into the page.
• ridge: The outline looks raised from the page.
• inset: The outline makes the element look embedded.
• outset: The outline makes the element look raised out of the page.

Global Values

• inherit: The element inherits the outline-style from its parent.
• initial: Sets the property to its default value.
• revert: Resets the property to the browser’s default.
• revert-layer: Resets the property to the user-agent stylesheet value.
• unset: Acts as inherit if inherited, otherwise acts as initial.

Example

Here’s how to use the outline-style property in CSS:

.element {
  outline-style: dotted;
}

In this example, the element with the class .element will have a dotted outline.

Values

The outline-style property provides various values to customize the appearance of an element’s outline. Here’s a detailed explanation:

• auto: The browser chooses a custom outline style.
• none: No outline is shown.
• dotted: The outline is a series of dots.
• dashed: The outline is a series of short dashes.
• solid: The outline is a single, continuous line.
• double: The outline has two parallel lines.
• groove: The outline looks carved into the page.
• ridge: The outline looks raised from the page.
• inset: The outline makes the element look embedded.
• outset: The outline makes the element look raised out of the page.
• initial: Sets the property to its default value.
• inherit: The element inherits the outline-style from its parent.
• revert: Resets the property to the browser’s default.
• revert-layer: Resets the property to the user-agent stylesheet value.
• unset: Acts as inherit if inherited, otherwise acts as initial.

Examples

Here are some examples to illustrate how the outline-style property works:

Setting Outline Style to Auto

<div class="auto">Outline Demo</div>

.auto {
  outline-style: auto;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Setting Outline Style to Dotted and Dashed

<div class="dotted">
  <p class="dashed">Outline Demo</p>
</div>

.dotted {
  outline-style: dotted;
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Setting Outline Style to Solid and Double

<div class="solid">
  <p class="double">Outline Demo</p>
</div>

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Setting Outline Style to Groove and Ridge

<div class="groove">
  <p class="ridge">Outline Demo</p>
</div>

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Setting Outline Style to Inset and Outset

<div class="inset">
  <p class="outset">Outline Demo</p>
</div>

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Formal Definition

The outline-style property in CSS defines the style of an element’s outline. Here’s the formal definition:

Formal Syntax

The formal syntax for the outline-style property is:

outline-style = auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | initial | revert | revert-layer | unset;

Browser Compatibility

The outline-style property is widely supported across all major web browsers, ensuring consistent and visually appealing designs.

See Also

To boost your CSS and web development skills, check out these useful resources:

• [outline]WebsiteUrl: Learn about the shorthand property for setting all outline properties at once.
• [outline-width]WebsiteUrl: Explore how to set the width of an element’s outline.
• [outline-color]WebsiteUrl: Discover how to set the color of an element’s outline.
• [outline-offset]WebsiteUrl: Understand how to set the space between an element’s outline and its edge.
• [CSS Basic User Interface Module Level 4]WebsiteUrl: Dive into the official specification for more detailed information on the outline-style property.
• [MDN Web Docs]WebsiteUrl: Access comprehensive guides and tutorials on CSS and web development.