CSS Outline: Properties, Syntax and Examples

CSS Outline

A CSS outline is a line drawn around an HTML element. It is commonly used to highlight buttons, links, form fields, and other interactive elements.

An outline may look similar to a border, but the two are not the same. A border is part of an elements box model. An outline is drawn outside the border and usually does not affect the elements size or the surrounding layout.

Outlines are especially important for accessibility. Web browsers often display an outline when a link, button, or input receives keyboard focus. This helps keyboard users identify the currently selected element.

button:focus {
  outline: 3px solid blue;
}

CSS Outline at a Glance

Feature	Description
Purpose	Highlights an element
Position	Usually drawn outside the border
Box model	Not included in width or height calculations
Layout effect	Does not normally take up space
Shape	Follows the elements outline area
Individual sides	Cannot normally be styled separately
Accessibility	Commonly indicates keyboard focus
Main properties	`outline-style`, `outline-width`, `outline-color`, `outline-offset`, `outline`

Basic Syntax

An outline can be created with separate properties:

.element {
  outline-width: 3px;
  outline-style: solid;
  outline-color: blue;
}

You can also use the shorthand outline property:

.element {
  outline: 3px solid blue;
}

The general shorthand syntax is:

selector {
  outline: width style color;
}

The values do not always need to appear in that exact order. However, writing them as width, style, and color makes the declaration easier to read.

CSS Outline Properties

CSS provides the following main outline properties:

Property	Purpose
`outline-style`	Sets the outlines line style
`outline-width`	Sets the thickness of the outline
`outline-color`	Sets the outlines color
`outline-offset`	Controls the space between the element and its outline
`outline`	Shorthand for width, style, and color

The `outline-style` Property

The outline-style property defines the appearance of the outline.

p {
  outline-style: solid;
}

An outline is generally not visible unless an outline style is specified. Setting only the width or color may not produce a visible result.

Available outline styles

Value	Appearance
`none`	Displays no outline
`hidden`	Hides the outline
`dotted`	Creates a series of dots
`dashed`	Creates a series of short lines
`solid`	Creates one continuous line
`double`	Creates two solid lines
`groove`	Creates a carved 3D effect
`ridge`	Creates a raised 3D effect
`inset`	Makes the element appear embedded
`outset`	Makes the element appear raised
`auto`	Lets the browser choose an appropriate outline
`inherit`	Uses the parent elements value
`initial`	Restores the propertys initial value
`revert`	Restores the value from an earlier style origin
`unset`	Acts as `inherit` or `initial`, depending on the property

Examples

.dotted {
  outline-style: dotted;
}

.dashed {
  outline-style: dashed;
}

.solid {
  outline-style: solid;
}

.double {
  outline-style: double;
}

The 3D styles may appear differently across browsers, operating systems, and color combinations.

The `outline-width` Property

The outline-width property controls the thickness of the outline.

div {
  outline-style: solid;
  outline-width: 4px;
}

It accepts keyword values and CSS length values.

Keyword values

.thin {
  outline-width: thin;
}

.medium {
  outline-width: medium;
}

.thick {
  outline-width: thick;
}

The exact thickness of thin, medium, and thick is chosen by the browser.

Length values

.box {
  outline-style: solid;
  outline-width: 5px;
}

Common supported units include:

px
em
rem
pt

A pixel value is often used when an exact visual thickness is required.

input:focus {
  outline-width: 3px;
  outline-style: solid;
}

The width will not create a visible outline when outline-style is none.

The `outline-color` Property

The outline-color property sets the color of an elements outline.

.box {
  outline-style: solid;
  outline-color: crimson;
}

You can define the color in several ways.

Named color

.element {
  outline-color: blue;
}

Hexadecimal color

.element {
  outline-color: #2563eb;
}

RGB color

.element {
  outline-color: rgb(37, 99, 235);
}

RGBA color

.element {
  outline-color: rgba(37, 99, 235, 0.7);
}

HSL color

.element {
  outline-color: hsl(221, 83%, 53%);
}

The `currentColor` value

The currentColor keyword uses the value of the elements color property.

a {
  color: darkgreen;
  outline: 2px solid currentColor;
}

This is useful for keeping text and outline colors consistent.

The `invert` value

Some CSS specifications describe invert as an outline-color value intended to improve visibility by reversing colors. However, browser support is limited and inconsistent. A specific high-contrast color is usually more reliable.

The `outline` Shorthand Property

The outline property combines outline width, style, and color in one declaration.

.card {
  outline: 2px solid #7c3aed;
}

It is equivalent to:

.card {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #7c3aed;
}

Other shorthand examples

.example-one {
  outline: dotted red;
}

.example-two {
  outline: thick double green;
}

.example-three {
  outline: 4px dashed rgb(255, 140, 0);
}

The only essential component for making an outline visible is normally its style. Missing width and color values use their initial or computed defaults.

.element {
  outline: solid;
}

Still, providing all three values makes the result clearer and more predictable.

The `outline-offset` Property

The outline-offset property controls the distance between an elements border edge and its outline.

button {
  outline: 3px solid blue;
  outline-offset: 4px;
}

A positive value moves the outline farther away from the element:

.box {
  outline: 2px solid orange;
  outline-offset: 8px;
}

A negative value moves the outline inward:

.box {
  outline: 2px solid red;
  outline-offset: -4px;
}

Important facts about `outline-offset`

It accepts CSS length values.
Positive values create space outside the element.
Negative values move the outline toward or into the element.
It is not included in the outline shorthand.
The space created by it is transparent.
It does not normally change document layout.

The following is incorrect if you expect the final value to represent an offset:

/* The outline shorthand does not accept outline-offset. */
.element {
  outline: 2px solid blue 4px;
}

Write the offset separately:

.element {
  outline: 2px solid blue;
  outline-offset: 4px;
}

Complete Outline Example

<div class="notice">
  Important information
</div>

.notice {
  width: 280px;
  padding: 20px;
  margin: 30px;
  background-color: #fff7ed;
  border: 1px solid #fdba74;

  outline-width: 3px;
  outline-style: dashed;
  outline-color: #c2410c;
  outline-offset: 5px;
}

This example gives the element:

A one-pixel border
A three-pixel dashed outline
A five-pixel transparent gap between the border and outline

CSS Border vs Outline

Borders and outlines can appear similar, but they serve different purposes.

CSS border	CSS outline
Part of the CSS box model	Not normally part of the box model
Can affect the elements dimensions	Does not normally affect dimensions
Takes up layout space	Usually takes up no layout space
Can be styled on individual sides	Generally applies around the whole element
Supports border radius directly	May follow the elements shape, but rendering can vary
Commonly used for permanent decoration	Commonly used for focus and temporary emphasis
Supports different widths on each side	Uses one outline width around the element
Can influence surrounding layout	May overlap nearby content

Border example

.box {
  border: 4px solid black;
}

Outline example

.box {
  outline: 4px solid red;
}

Using both together

.box {
  border: 2px solid black;
  outline: 3px dashed red;
  outline-offset: 4px;
}

An element can have both a border and an outline at the same time.

Outline and the CSS Box Model

The standard CSS box model contains:

Content
Padding
Border
Margin

An outline is drawn outside the border edge, but it is not treated as an additional box-model layer that reserves layout space.

Consider this example:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  outline: 10px solid red;
}

With the default content-box sizing, the calculated width before margins is:

200px content + 40px padding + 10px border = 250px

The 10-pixel outline is not added to the calculated layout width. It may extend visually beyond the 250-pixel box and overlap nearby content.

This makes outlines useful for highlighting elements without causing the page to shift.

Outlines Do Not Reserve Space

Because an outline does not normally affect layout, a thick outline may cover or overlap:

Adjacent text
Nearby elements
Container edges
Content near the viewport boundary

.card:hover {
  outline: 12px solid rgba(0, 100, 255, 0.25);
}

The card will not push neighboring cards away when the outline appears. This avoids layout movement, but the outline may overlap them.

Use margins, gaps, or suitable outline offsets when additional visual space is needed.

Outlines and Rounded Corners

Modern browsers commonly render outlines in a way that follows an elements rounded shape.

button {
  border-radius: 10px;
}

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

However, exact outline rendering can vary between browsers. If you require complete control over a decorative rings radius, thickness, and spread, box-shadow may provide more predictable styling.

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45);
}

When replacing an outline with a shadow, make sure the custom indicator remains clearly visible.

Outlines on Multi-Line Elements

Outlines do not always form a perfect rectangle. An inline element that wraps across multiple lines may produce an outline around its individual line boxes.

<p>
  Read this
  <a href="#" class="long-link">
    long link that may wrap onto another line
  </a>
  for more information.
</p>

.long-link:focus {
  outline: 2px solid purple;
}

The result depends on the elements shape, line wrapping, and browser rendering. This is one reason an outline should not be treated as an exact replacement for a border.

CSS Outlines for Keyboard Focus

One of the most important uses of an outline is showing keyboard focus.

People may navigate a website with:

The Tab key
The Shift + Tab combination
Switch devices
Voice-control software
Other assistive technologies

When an interactive element receives focus, users need a clear visual indication of its location.

Browsers normally provide a default focus outline:

button:focus {
  outline: auto;
}

Developers sometimes remove this indicator:

button:focus {
  outline: none;
}

Doing so without providing a visible replacement creates an accessibility problem. Keyboard users may no longer know which control is active.

Using `:focus`

The :focus pseudo-class matches an element whenever it has focus.

input:focus {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

This focus style may appear whether the user focuses the input with a keyboard, mouse, script, or another method.

Using `:focus-visible`

The :focus-visible pseudo-class allows the browser to show a custom focus indicator when it determines that a visible indicator is useful. It is particularly valuable for keyboard navigation.

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

A practical approach is:

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

However, broadly removing :focus styles should be done carefully. A safer modern pattern is to retain a useful default and enhance :focus-visible.

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

Using `:focus-within`

The :focus-within pseudo-class matches an element when that element or one of its descendants has focus.

<div class="form-field">
  <label for="email">Email address</label>
  <input type="email" id="email">
</div>

.form-field:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
}

This can highlight an entire form-field group when its input is active.

Accessible Focus Outline Example

:where(
  a,
  button,
  input,
  select,
  textarea,

[tabindex]

):focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

A good focus indicator should:

Be clearly visible
Contrast with nearby colors
Be thick enough to recognize
Work on both light and dark backgrounds
Remain visible when the page is zoomed
Not depend on color alone when possible

For complex designs, a two-color focus indicator can improve visibility across different backgrounds.

button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #005fcc;
}

Styling Form Validation with Outlines

Outlines can highlight invalid or valid form fields.

input:invalid:not(:placeholder-shown) {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

input:valid:not(:placeholder-shown) {
  outline: 2px solid #15803d;
  outline-offset: 2px;
}

Do not communicate validation status only through red and green colors. Include text that explains the problem.

<label for="username">Username</label>
<input
  id="username"
  type="text"
  aria-describedby="username-error"
  required
>
<p id="username-error">
  Enter a username.
</p>

Using Outlines on Hover

An outline may be used as a hover effect:

.card {
  transition: outline-color 0.2s ease;
  outline: 2px solid transparent;
}

.card:hover {
  outline-color: #6366f1;
}

Using a transparent outline in the default state can make the intent clear, although outlines do not normally cause layout shifts anyway.

Do not use hover as the only way to reveal important information. Touchscreen users and keyboard users may not be able to trigger the same interaction.

Highlighting Selected Elements

Outlines are useful for marking selected items.

.product-card.is-selected {
  outline: 4px solid #7c3aed;
  outline-offset: 3px;
}

They can also indicate a drag-and-drop target:

.drop-zone.is-active {
  outline: 3px dashed #0284c7;
  outline-offset: -8px;
  background-color: #e0f2fe;
}

Debugging Layouts with CSS Outlines

Outlines are extremely useful during development because they reveal element boundaries without changing the layout.

* {
  outline: 1px solid red;
}

This rule applies an outline to every element. It can help identify:

Unexpected overflow
Elements that are too wide
Nested container boundaries
Incorrect spacing
Hidden layout boxes

A more readable debugging version uses different colors:

html * {
  outline: 1px solid rgba(255, 0, 0, 0.25);
}

Remove debugging outlines before publishing the website.

Outline vs Box Shadow

Both outlines and box shadows can create a ring around an element.

Outline	Box shadow
Designed partly for highlighting and focus	Designed for visual shadow effects
Supports style values such as dashed and dotted	Does not support dashed or dotted rings
Uses `outline-offset` for separation	Uses spread radius to create a ring
May follow irregular outline geometry	Usually follows the elements box
Simple and meaningful for focus indicators	Offers greater decorative control
Does not support multiple outline layers	Multiple shadows can be combined

Outline ring

.button {
  outline: 3px solid blue;
  outline-offset: 3px;
}

Box-shadow ring

.button {
  box-shadow: 0 0 0 3px blue;
}

Multiple rings with box shadow

.button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px navy;
}

For accessibility, an actual outline is usually a strong starting point. A box shadow may be added when additional contrast or design control is required.

Transparent Outlines

A transparent outline can exist without being visible.

.button {
  outline: 3px solid transparent;
}

Its color can then change in another state:

.button:focus-visible {
  outline-color: #2563eb;
}

Transparent outlines can also be useful in high-contrast or forced-color environments, depending on how the browser adapts the styles.

Outlines in High-Contrast Modes

Some users enable forced-colors or high-contrast modes. Hard-coded colors and shadows may be changed or removed by the operating system or browser.

System color keywords can help create adaptable focus indicators:

button:focus-visible {
  outline: 2px solid CanvasText;
  outline-offset: 3px;
}

You can also add specific forced-color styles:

@media (forced-colors: active) {
  button:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

Avoid relying entirely on box-shadow for focus because shadows may not remain visible in every forced-color environment.

Removing an Outline Safely

There are limited situations in which removing an outline is appropriate. You should remove it only when a clear replacement is provided.

Poor practice:

*:focus {
  outline: none;
}

Better practice:

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

If the default outline does not match the sites design, replace it with an accessible custom style instead of simply hiding it.

Common CSS Outline Mistakes

Removing every focus outline

* {
  outline: none;
}

This makes keyboard navigation difficult. Avoid global outline removal.

Setting only the color

.box {
  outline-color: red;
}

The outline may remain invisible because the default outline style is usually none.

Use:

.box {
  outline: 2px solid red;
}

Treating an outline like a border

An outline does not reserve space. A thick outline may overlap nearby content.

Trying to style one side

Properties such as the following do not form part of standard CSS outline styling:

/* Not valid standard outline-side properties */
outline-top: 2px solid red;
outline-left: 2px solid blue;

Use borders, pseudo-elements, gradients, or positioned elements when individual sides need different styles.

Adding offset to the shorthand

/* Invalid */
outline: 2px solid blue 5px;

Use:

outline: 2px solid blue;
outline-offset: 5px;

Using low-contrast colors

A light-grey outline on a white background may be difficult to see. Check the indicator against every background it can cross.

Using focus styles only on buttons

Links, inputs, text areas, selects, custom controls, and elements with valid interactive behavior also need visible focus indicators.

Practical Examples

Accessible button

<button class="save-button">Save changes</button>

.save-button {
  padding: 10px 18px;
  color: white;
  background-color: #1d4ed8;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.save-button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Search field

.search-input {
  padding: 12px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
}

.search-input:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 1px;
}

Selected card

.card {
  padding: 20px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
}

.card.selected {
  outline: 3px solid #7c3aed;
  outline-offset: 4px;
}

Navigation links

nav a {
  color: #1e3a8a;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

nav a:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 4px;
}

Dark-mode focus style

:root {
  --focus-color: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #fbbf24;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

Animating CSS Outlines

Some outline-related values can be transitioned. However, focus indicators should appear immediately enough to remain useful.

.card {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition:
    outline-color 0.2s ease,
    outline-offset 0.2s ease;
}

.card:hover {
  outline-color: #8b5cf6;
  outline-offset: 4px;
}

Avoid excessive animation on keyboard focus. A moving or fading indicator may make navigation harder for some users.

You can respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Global CSS Values

Outline properties can use common global CSS values.

.element {
  outline: inherit;
}

.element {
  outline: initial;
}

.element {
  outline: revert;
}

.element {
  outline: unset;
}

Their meanings are:

inherit: takes the computed value from the parent.
initial: uses the propertys initial value.
revert: returns to the value established by an earlier CSS origin.
unset: behaves like inherit for inherited properties and initial for non-inherited properties.

Outline properties are generally not inherited by default.

Browser Support

The major CSS outline properties are well supported by modern browsers:

outline
outline-style
outline-width
outline-color
outline-offset

The visual result may vary slightly across browsers, especially when using:

outline-style: auto
3D outline styles
Rounded corners
Wrapped inline elements
Forced-color settings

Always test important focus indicators in multiple browsers and at different zoom levels.

Best Practices

Follow these practices when using CSS outlines:

Keep visible focus indicators on interactive elements.
Use :focus-visible for keyboard-friendly focus styling.
Choose a color that contrasts with the background.
Use a sufficient outline thickness.
Add outline-offset to separate the indicator from the element.
Test the outline on light, dark, and image-based backgrounds.
Do not use outline: none without an accessible replacement.
Remember that outlines do not reserve layout space.
Use borders when individual sides require different styling.
Use box-shadow only when its added visual control is necessary.
Test high-contrast and forced-color modes.
Keep focus indicators consistent across the website.

Frequently Asked Questions

What is an outline in CSS?

An outline is a line drawn around an element, usually outside its border. It is often used to highlight focused or selected elements.

Does an outline affect an elements size?

No. An outline is not normally included in an elements calculated width or height and does not reserve layout space.

What is the difference between a border and an outline?

A border is part of the box model and can affect an elements dimensions. An outline is drawn outside the border and usually does not affect layout.

Can an element have a border and an outline together?

Yes. A border and an outline can be applied to the same element.

.box {
  border: 2px solid black;
  outline: 3px solid orange;
}

Can each side of an outline have a different style?

No. Standard CSS outlines cannot be independently styled on the top, right, bottom, and left sides. Use border properties when separate side styling is required.

Why is my CSS outline not visible?

The most common reason is that no outline style has been set.

.element {
  outline: 2px solid red;
}

Also check whether another rule is overriding the declaration.

What does `outline-offset` do?

It changes the distance between the outline and the elements border edge. A positive value moves the outline outward, while a negative value moves it inward.

Is `outline: none` bad?

It is harmful when it removes the only visible keyboard-focus indicator. It may be used only when an equally clear or better replacement is provided.

Should I use `:focus` or `:focus-visible`?

Use :focus when a style must appear whenever an element receives focus. Use :focus-visible when the indicator should appear according to the browsers focus-visibility rules, particularly during keyboard navigation.

Can an outline be rounded?

Modern browsers often render an outline around rounded elements appropriately, but exact results can vary. Use box-shadow if precise decorative control is essential.

Can outlines overlap other elements?

Yes. Because outlines do not reserve layout space, wide outlines may overlap nearby content.

Conclusion

CSS outlines provide a simple and effective way to highlight elements without changing page layout. They are useful for selected cards, validation states, debugging, hover effects, and drag-and-drop areas. Their most important role, however, is showing keyboard focus.

The shorthand property makes an outline easy to create:

.element {
  outline: 3px solid blue;
  outline-offset: 3px;
}

A well-designed outline improves both usability and accessibility. Preserve browser focus indicators unless you replace them with a custom style that is equally clear, visible, and reliable.