CSS outline-style Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The outline-style property in CSS is used to define the style of an outline that is drawn around an element.

Unlike borders, outlines do not take up space and are not part of the element's layout, but they are useful for creating visual emphasis or focus indicators.

This property is commonly used in conjunction with outline-width and outline-color to fully customize the appearance of an outline.

💡 Syntax

The syntax for the outline-style property is simple. It specifies the style of the outline to be used.

Syntax

Copied

element {
  outline-style: style;
}

Here, style can be one of the predefined keyword values that define the outline’s appearance.

🎛️ Default Value

The default value of the outline-style property is none. This means that if you don’t explicitly set a value, no outline will be drawn around the element.

🏠 Property Values

Value	Description
none	No outline is drawn.
solid	A solid line outline.
dotted	A dotted outline.
dashed	A dashed outline.
double	A double line outline.
groove	A 3D grooved outline, which appears as if it is carved into the page.
ridge	A 3D ridged outline, which appears as if it is raised from the page.
inset	A 3D inset outline, which appears as if it is embedded into the page.
outset	A 3D outset outline, which appears as if it is coming out of the page.

📄 Example

In this example, we'll set a solid outline style for a button element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS outline-style Example</title>
  <style>
    button {
      outline-style: solid;
      outline-width: 2px;
      outline-color: #ff5733;
    }
  </style>
</head>
<body>
  <h1>Button with Solid Outline Style</h1>
  <button>Click Me</button>
</body>
</html>

🖥️ Browser Compatibility

The outline-style property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a reliable property for creating consistent visual emphasis or focus indicators across different web browsers.

🎉 Conclusion

The outline-style property is a useful tool for adding visual emphasis or focus indicators to elements on your webpage.

By customizing the style of the outline, you can enhance the user experience and improve the accessibility of your website. Experiment with different styles to see how they can complement your design and meet your needs.