Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS outline-style Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
πŸ‘οΈ 11 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS outline-style Property

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
Copy To Clipboard
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

ValueDescription
noneNo outline is drawn.
solidA solid line outline.
dottedA dotted outline.
dashedA dashed outline.
doubleA double line outline.
grooveA 3D grooved outline, which appears as if it is carved into the page.
ridgeA 3D ridged outline, which appears as if it is raised from the page.
insetA 3D inset outline, which appears as if it is embedded into the page.
outsetA 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
Copy To Clipboard
<!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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy