CSS Outline: Syntax, Usage, and Examples

The CSS outline property lets you draw a line around an element—outside its border—without affecting layout. It’s often used to highlight focused elements, create visual feedback for interactions, or emphasize certain parts of your design. While similar to borders, outlines in CSS behave differently in terms of space, placement, and styling options.

How to Use CSS Outline

The CSS outline property can be defined with shorthand or individual longhand properties. The basic shorthand syntax looks like this:

selector {
  outline: width style color;
}

Example:

button {
  outline: 2px solid blue;
}

This creates a blue outline around the button, which doesn’t add to the element’s size or push surrounding content.

You can also define each part separately:

outline-width: 2px;
outline-style: dashed;
outline-color: red;

Unlike borders, outlines don’t support border-radius and can’t be styled with inset placement—but they can be easily removed or changed dynamically, making them especially useful for accessibility and interactive design.

When to Use Outline CSS

You can use CSS outline to improve accessibility, create stylistic highlights, or debug layouts without altering element dimensions. Common use cases include:

Showing Focus States

Outlines are often used to indicate focus on keyboard navigation:

button:focus {
  outline: 2px solid black;
}

This helps users who navigate via keyboard or screen readers understand where their focus is.

Creating Temporary Highlights

Use outline CSS to highlight form fields, buttons, or cards after an event like validation or mouse interaction:

.input-error {
  outline: 2px solid red;
}

This provides a quick, non-disruptive visual cue without changing layout spacing.

Debugging Box Models

You can use outlines to visually inspect spacing and positioning:

* {
  outline: 1px solid limegreen;
}

Unlike borders, outlines won’t shift your layout, making them perfect for temporary diagnostics.

Examples of CSS Outline in Action

Basic Outline on Hover

a:hover {
  outline: 2px dashed orange;
}

Adds a dashed orange outline when users hover over a link.

Removing Default Outline

Browsers add a default focus outline to interactive elements. You can remove it, but only do this if you're replacing it with another accessible style:

button:focus {
  outline: none;
}

Then, be sure to provide an alternative indication, such as:

button:focus {
  box-shadow: 0 0 0 2px #5b9dd9;
}

Outline Bottom in CSS

If you want to simulate an outline only on the bottom, outlines won’t help. They apply to all four sides. Instead, use a border:

.underline {
  border-bottom: 2px solid black;
}

Outlines don’t support side-specific application like outline-bottom CSS would imply.

Learn More About Outlines in CSS

CSS Text Outline

While outline works great on boxes, it doesn't apply directly to text. If you're looking for CSS text outline effects, you have a few options:

1. Use text-shadow to Fake an Outline

.outlined-text {
  color: white;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

This mimics outlined text without relying on borders or outlines.

2. Use SVG or Stroke for True Text Outlines

For precise font outlines, SVG or canvas offers more flexibility. You can also experiment with -webkit-text-stroke for some modern browsers:

.outlined {
  -webkit-text-stroke: 1px black;
  color: white;
}

Note: browser support is limited outside of WebKit-based browsers.

CSS Font Outline for Styling Headers

If you want to outline just the shape of a heading:

.outlined-heading {
  color: transparent;
  -webkit-text-stroke: 2px navy;
}

This creates a hollow text look, often used for bold visual effects.

CSS Outline Radius

Unlike borders, outlines don’t accept border-radius. So even if your element has rounded corners, the outline will appear rectangular:

.rounded-box {
  border-radius: 10px;
  outline: 2px solid red;
}

In this case, the border is curved, but the outline will stick to a boxy shape.

To create an outline effect that follows the border’s curve, you’ll need to simulate the outline with a second container and some spacing:

<div class="outline-wrapper">
  <div class="rounded-box">Content</div>
</div>

.outline-wrapper {
  padding: 4px;
  background: red;
  border-radius: 12px;
}

.rounded-box {
  background: white;
  border-radius: 10px;
}

This gives the illusion of a curved outline, since actual CSS outline radius is not supported.

How to Make Outlined Text in CSS

To style text with an outline effect, try using either multiple shadows or stroke techniques. Here's another example:

.text-outline {
  font-size: 48px;
  color: white;
  text-shadow:
    2px 2px 0 black,
   -2px -2px 0 black,
    2px -2px 0 black,
   -2px  2px 0 black;
}

This gives a blocky text outline that stands out on dark or colorful backgrounds.

CSS Outline Color and Customization

You can customize the color, style, and width of an outline using longhand properties:

button {
  outline-color: teal;
  outline-width: 3px;
  outline-style: dotted;
}

Outlines can be solid, dotted, dashed, double, ridge, groove, or inset, although solid is the most reliable and widely supported style.

Using Outline Offset

outline-offset lets you control how far the outline is from the edge of the element:

button {
  outline: 2px solid black;
  outline-offset: 4px;
}

This creates space between the element and its outline, adding visual separation without affecting the layout.

This is useful for accessibility or when designing with contrast in mind.

Outline Inside CSS?

Outlines always appear outside the element. If you want an “inner” outline, you’ll need to simulate it using box-shadow or pseudo-elements:

.inner-outline {
  box-shadow: inset 0 0 0 2px black;
}

This gives the appearance of a border inside the element—something outlines can’t do.