What is CSS outline?

A CSS outline is a line drawn around an element, outside its border edge. People often use it for focus styles (like when you Tab through a form), debugging layouts, or adding emphasis without messing with layout.

The big personality trait of outlines: they don’t take up space in the box model. So unlike borders, they won’t “push” anything around when they appear. 

.card {
  outline: 4px solid #0077b6;
}
  
.card {
  outline: 4px dashed #ef233c;
}
  
.card {
  outline: 6px double #111;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 14px;
}

.card {
  padding: 16px;
  border: 2px solid #111;
  border-radius: 16px;
  background: #f7f7f7;
}

.card strong {
  display: inline-block;
  margin-bottom: 6px;
}
  

  

    Outline demo
    
Outlines draw around the element, without changing layout.

CSS outline property basics

The outline shorthand is like a tiny “combo meal”: outline: [width] [style] [color];

  • width: how thick the outline is (for example 2px)
  • style: how it’s drawn (solid, dashed, dotted, double, etc.)
  • color: what color it is (a color value, or currentColor)

If you forget the style, you might be surprised: outline-width and outline-color alone won’t show anything if the style is none. 

.card {
  outline: 3px solid #111;
}
  
.card {
  outline-width: 6px;
  outline-style: solid;
  outline-color: #0077b6;
}
  
.card {
  outline: 5px dashed currentColor;
  color: #ef233c;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.card {
  padding: 16px;
  border: 2px solid #111;
  border-radius: 16px;
  background: #f7f7f7;
}

.hint {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}
  

  

    

      Tip: currentColor makes the outline match the element’s color.

CSS outline color and outline-offset

outline-offset adds breathing room between the element and its outline. Positive values move the outline outward. Negative values pull it inward.

This is super useful for focus rings: you can keep your outline visible without hugging the element too tightly. 

.card {
  outline: 4px solid #0077b6;
  outline-offset: 6px;
}
  
.card {
  outline: 4px solid #ef233c;
  outline-offset: 14px;
}
  
.card {
  outline: 4px solid #111;
  outline-offset: -8px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 14px;
}

.card {
  padding: 16px;
  border: 2px solid #111;
  border-radius: 16px;
  background: #f7f7f7;
}

.note {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    

      Try the negative offset snippet. It pulls the outline inward, which can look “inset-like” even though it’s still an outline.

CSS outline vs border

Outlines and borders can look similar, but they behave differently:

  • Border affects layout: adding a thick border increases the element’s visual size (and can shift nearby content).
  • Outline does not affect layout: it’s painted “over” the page without taking space.
  • Border follows border-radius very reliably; outline can be inconsistent with rounded corners (we’ll cover that next).

The easiest way to feel this difference is to stack two boxes and toggle a thick border vs a thick outline. 

.demo {
  border: 12px solid #ef233c;
}
  
.demo {
  outline: 12px solid #ef233c;
}
  
.demo {
  outline: 12px solid #0077b6;
  outline-offset: 8px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.stack {
  display: grid;
  gap: 14px;
}

.demo {
  padding: 14px;
  background: #f7f7f7;
  border: 2px solid #111;
  border-radius: 16px;
}

.demo strong {
  display: inline-block;
  margin-bottom: 6px;
}

.subtle {
  font-size: 14px;
  opacity: 0.85;
  margin: 0;
}
  

  

    

      Box A
      
Border adds thickness inside the box model.

    

    

      Box B
      
Outline paints around the box without pushing layout.

Learn more about border in the CSS Border Interactive Tutorial.

CSS outline radius (and browser behavior)

You might expect outline to perfectly follow border-radius. Sometimes it does… and sometimes it kind of does… and sometimes it refuses to.

The tricky bit: outlines are drawn outside the border edge, and historically browsers have treated their corner rendering differently. So rounded corners with outlines can be inconsistent depending on browser and the exact style/offset.

Practical beginner-friendly rule: if you need a guaranteed rounded “outline” look, use a box-shadow ring or a pseudo-element. You still can use outline for focus rings, but be aware that perfect rounding is not universal. 

.card {
  border-radius: 28px;
  outline: 6px solid #0077b6;
  outline-offset: 10px;
}
  
.card {
  border-radius: 28px;
  box-shadow: 0 0 0 6px #0077b6;
}
  
.card {
  border-radius: 28px;
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 6px solid #0077b6;
  border-radius: inherit;
  pointer-events: none;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 14px;
}

.card {
  padding: 16px;
  border: 2px solid #111;
  background: #f7f7f7;
}

.small {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    

      Compare the outline snippet to the box-shadow and pseudo-element options.
      If you need perfectly rounded “rings”, box-shadow or pseudo-elements are the reliable tools.

CSS outline bottom only (using pseudo-elements)

There’s no built-in outline-bottom. Outline is all-or-nothing around the element. But you can fake a “bottom-only outline” using a pseudo-element that draws a line.

Think of it like this: we’re not actually making an outline anymore. We’re drawing a custom stroke where we want it. The advantage: you get full control, including offsets and rounded corners. 

.item {
  position: relative;
}

.item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 0;
border-bottom: 4px solid #0077b6;
} 
.item {
  position: relative;
}

.item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  height: 0;
  border-bottom: 4px dashed #ef233c;
}
  
.item {
  position: relative;
}

.item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 6px;
  background: #111;
  border-radius: 999px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.item {
  padding: 16px;
  border: 2px solid #111;
  border-radius: 16px;
  background: #f7f7f7;
}

.item strong {
  display: inline-block;
  margin-bottom: 6px;
}
  

  

    Bottom-only “outline”
    
We’re using ::after to draw only the bottom stroke.

Learn more about pseudo-elements in the CSS ::before and ::after Pseudo-Elements Interactive Tutorial.

CSS outline inset (and outline-style: inset)

CSS has a few “3D-ish” outline styles: inset, outset, ridge, and groove. They’re old-school (and kind of charming), and they depend on the outline color to fake light/shadow.

Important detail: outline-style: inset; does not mean “draw the outline inside the element”. It means “draw an inset-looking line style”.

If you truly want an outline-like line inside the element, a common trick is a negative outline-offset (or, for more reliability, box-shadow: inset). 

.card {
  outline: 6px inset #0077b6;
}
  
.card {
  outline: 6px outset #ef233c;
}
  
.card {
  outline: 6px solid #111;
  outline-offset: -10px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 14px;
}

.card {
  padding: 16px;
  border: 2px solid #111;
  border-radius: 16px;
  background: #f7f7f7;
}

.tip {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    

      Notice how inset and outset are “style illusions”, while negative outline-offset actually moves the outline inward.

CSS outline text (using -webkit-text-stroke and text-shadow)

Here’s the catch: outline outlines the element’s box, not the letters inside it. If you want outlined text, you need a text-specific technique.

  • -webkit-text-stroke draws a real stroke around glyphs. It’s clean and readable.
  • text-shadow can fake an outline by layering shadows in multiple directions. It’s more widely usable, but it’s a “hack”, and thick outlines can look fuzzy. 
.title {
  -webkit-text-stroke: 2px #111;
  color: transparent;
}
  
.title {
  color: #f7f7f7;
  text-shadow:
    1px 0 0 #111,
    -1px 0 0 #111,
    0 1px 0 #111,
    0 -1px 0 #111,
    1px 1px 0 #111,
    -1px 1px 0 #111,
    1px -1px 0 #111,
    -1px -1px 0 #111;
}
  
.title {
  -webkit-text-stroke: 2px #ef233c;
  color: #f7f7f7;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: Arial, sans-serif;
}

.panel {
  padding: 18px;
  border: 2px solid #111;
  border-radius: 16px;
  background: linear-gradient(135deg, #03045e 0%, #0077b6 50%, #90e0ef 100%);
}

.title {
  font-size: 44px;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.5px;
}

.small {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  opacity: 0.9;
  color: #111;
  background: #f7f7f7;
  border-radius: 999px;
  display: inline-block;
  padding: 6px 10px;
}
  

  

    
Outlined Text

    

      outline can’t outline letters, so we use -webkit-text-stroke or layered text-shadow.

Learn more about text outlines in the CSS Text Outline Interactive Tutorial.

Outline best practices (especially for focus)

Outlines are famous for accessibility because they make keyboard focus visible. A few beginner-friendly tips:

  • Prefer outline (or a clear focus ring) over removing focus styles. If you remove them, keyboard users can get lost.
  • Use outline-offset to keep the focus ring readable and not glued to the element.
  • If you need perfect rounded corners, consider a focus ring made with box-shadow. 
.button:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
}
  
.button:focus-visible {
  box-shadow: 0 0 0 4px #111;
}
  
.button:focus-visible {
  outline: 3px solid #0077b6;
  outline-offset: 6px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  border: 2px solid #111;
  background: #f7f7f7;
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-1px);
}

.hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    
    
    

      Use Tab to see :focus-visible in action.

Summary

  • outline draws around an element without affecting layout.
  • Use outline-offset to create space between the element and the outline.
  • For outline vs border, remember: borders can shift layout, outlines don’t.
  • Outline radius can be inconsistent; for perfect rounded rings use box-shadow or a pseudo-element.
  • For bottom-only, use a pseudo-element stroke.
  • outline-style: inset is a style effect, not “inside the box”.
  • For outlined text, use -webkit-text-stroke or layered text-shadow.