CSS Outline: Syntax, Usage, and Examples

The CSS outline property lets you draw a line around an element—outside its border—without affecting layout. In modern web design, this is one of the most useful CSS properties for creating interactive elements on web pages. 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 property 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 outline dimensions or push surrounding content.

You can also define each part separately:

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

The outline-color property, outline-style property, and outline-offset property give you granular control over how outlines appear. 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. The default value for outlines varies across browsers, but is typically a thin blue line.

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. Adding properties like background-color and text-align can enhance the visual feedback.

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. The transition property creates a smooth animation effect when the outline appears.

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;
}

Dynamic Outlines with JavaScript

JavaScript can be used to manipulate outlines in response to user interactions:

javascript
document.querySelector('button').addEventListener('click', function() {
  this.style.outline = '3px solid green';
});

This technique is useful for creating responsive feedback without modifying the element's border.

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.

The border-width property allows you to control individual sides, something outlines don't support as they can't have 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. HTML structure often needs to work together with CSS for more complex visual effects.

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.

Advanced Color Options

You can set the color of the outline using various formats including hexadecimal, RGB, and HSL:

.rgb-outline {
  outline: 2px solid rgb(255, 0, 0);
}

.hsl-outline {
  outline: 2px solid hsl(120, 100%, 50%);
}

You can even use the invert keyword to create an outline that will always contrast with the background:

.adaptive-outline {
  outline: 2px solid invert;
}

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;
}

Using a precise color value helps maintain design consistency across your website. The style of the outline 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. The distance is typically measured in pixels, though other CSS units can be used as well.

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.