CSS outline-style Property

The outline-style property defines the visual pattern of the line drawn around an element's outer edge.

selector { outline-style: value; }
none Specifies that no outline is rendered around the element.
dotted Renders the outline as a series of round dots.
dashed Renders the outline as a series of short line segments.
solid Renders the outline as a single continuous line.
double Renders the outline as two parallel solid lines.
groove Renders a 3D grooved line that looks carved into the page.
ridge Renders a 3D ridged line that looks embossed on the page.
inset Renders a 3D inset line making the element look embedded.
outset Renders a 3D outset line making the element look like it is popping out.
auto Delegates the styling to the browser, typically used for the platform's default focus ring.

Code Examples

A basic example showing a dashed outline applied directly to a div element.

<div style="outline-style: dashed; outline-width: 4px; outline-color: #ff0000; padding: 20px; margin: 20px;">
  This box has a thick red dashed outline. It sits outside the box and doesn't affect the padding or margin.
</div>

An advanced example using a focus state to trigger a solid blue outline, ensuring the layout stays stable while highlighting the active input.

<style>
  .custom-input {
    padding: 10px;
    border: 2px solid #ccc;
    outline-width: 3px;
    outline-style: none;
  }
  .custom-input:focus {
    outline-style: solid;
    outline-color: #007bff;
  }
</style>
<input type="text" id="myInput" class="custom-input" placeholder="Click me...">
<script>
  const input = document.getElementById("myInput");
  input.addEventListener("focus", () => {
    console.log("Input style is now: " + input.style.outlineStyle);
  });
</script>

Pro Tip

If you want a custom outline that doesn't hug the element too tightly, use the "outline-offset" property along with your style. This allows you to push the styled outline further away from the element, creating a "halo" effect that looks much cleaner than a standard border. You can also use "outline-style: auto" to ensure the focus ring matches the user's operating system defaults for a more native feel.

Deep Dive

Think of outline-style as the texture of a visual highlight. Unlike a border, which is like a physical frame that takes up space and can push other elements around, an outline is drawn outside the border and doesn't affect the box model calculations. It is essentially a "ghost" layer. This makes it perfect for indicating focus or active states without causing the layout to "jump" or shift when the style is applied. It sits on top of the box and doesn't care about the dimensions of its neighbors. It is rendered outside the border edge, and its appearance is purely cosmetic regarding the layout flow.

Best Practices

Always ensure that your chosen outline-style provides high contrast against the background so users can clearly see it. Stick to "solid" or "auto" for standard interactive elements like buttons and links. It is best to use this property in conjunction with the ":focus" pseudo-class to help keyboard users navigate your site. If you use a custom style, keep it consistent across the entire application so users aren't confused by changing patterns.

Common Pitfalls

The most common mistake is setting an outline-width and outline-color but forgetting to set the outline-style. Since the default value is "none", nothing will show up on the screen even if your width is 20px. Also, remember that outlines do not follow "border-radius" in some older browsers, though modern ones have improved this. Another catch is that outlines can overlap other elements because they don't occupy physical space in the document flow.

Accessibility

This property is vital for accessibility. It provides a visual indicator for users who navigate the web using a keyboard or switch device. If you set "outline-style: none" to remove the default browser ring, you must replace it with another high-visibility style. Removing the outline without a backup makes your site unusable for many people, as they won't know which element currently has the focus.

Dev Data Table: outline-style property

default none
animatable no
inherited no
experimental no
year_intro 1998
year_standard 1998
js_syntax_1 element.style.outlineStyle = "solid";
js_syntax_2 element.style.setProperty("outline-style", "dashed");
js_note When manipulating this property in JavaScript, ensure you also set an outline-width and outline-color if they aren't already defined in your CSS, or the outline won't be visible.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1.2, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...