Outlines, Border Sides and Border Images

What Is It?

Border longhands style individual edges. Outlines draw around a box without changing its size, while border-image paints a decorative border from an image.

Properties, Tags and Attributes Explained

• border-top / border-right / border-bottom / border-left: Style individual physical edges.
• border-width / border-style / border-color: Set edge widths, styles, or colors with one to four values.
• outline / outline-offset: Draw and offset an outline without reserving layout space.
• border-image-source / border-image-slice: Choose an image and slice it into border regions.
• border-bottom-style: Sets only the bottom border style, such as solid, dashed, or dotted, without changing its color or width.
• border-image-width: Specifies how wide the border image is painted; a number multiplies the corresponding border width.
• border-image-outset: Extends border-image painting outside the border box without reserving layout space.
• border-image-repeat: Chooses how edge image slices fill their region: stretch, repeat, round, or space.
• outline-color / outline-style / outline-width: Individual controls for an outline, corresponding to the parts of the outline shorthand.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Style separate edges

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    .demo { padding: 16px; border: 2px solid #cbd5e1; border-left: 6px solid #7c3aed; border-bottom-style: dashed; }
  </style>
</head>
<body>
  <p class="demo">A callout with a strong leading edge.</p>
</body>
</html>

What you see: The callout combines a purple left edge with a dashed bottom border.

Example 2: Visible focus outline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    button { padding: 12px; }
    button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
  <button type="button">Tab to this button</button>
</body>
</html>

What you see: Keyboard focus adds an outline separated from the border.

Example 3: Gradient border image

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    .demo { border: 8px solid; border-image-source: linear-gradient(90deg, #2563eb, #db2777); border-image-slice: 1; padding: 16px; }
  </style>
</head>
<body>
  <p class="demo">A decorative gradient border</p>
</body>
</html>

What you see: A gradient paints the border rather than the interior.

Example 4: Set border longhands and a right-edge override

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    .box { border-width: 2px 4px; border-style: solid dashed; border-color: #2563eb; border-right: 6px dotted #7c3aed; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">Compare the independent physical borders.</div>
</body>
</html>

What you see: Width and style shorthands set paired edges, then border-right replaces the right edge. Use longhands to keep one setting independent from the others.

Example 5: Control the decorative border image

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    .box { margin: 20px; border: 8px solid; border-image-source: repeating-linear-gradient(45deg, #2563eb 0 8px, #c4b5fd 8px 16px); border-image-slice: 12; border-image-width: 1; border-image-outset: 1; border-image-repeat: round; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">A border image painted beyond the border box</div>
</body>
</html>

What you see: The decorative border extends by one border-width outside the box. Compare round and stretch and keep enough margin for the outset.

Example 6: Set outline longhands

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outlines, Border Sides and Border Images</title>
  <style>
    .box { margin: 16px; padding: 16px; outline-color: #7c3aed; outline-style: dashed; outline-width: 3px; outline-offset: 4px; }
  </style>
</head>
<body>
  <div class="box">A separate dashed outline</div>
</body>
</html>

What you see: The outline longhands create the same kind of result as the shorthand without changing box dimensions. Use individual longhands to override only one outline component.

When and Where to Use It

Use border sides for callouts, outlines for focus or debugging, and border images for decorative frames.

Common Mistake or Useful Tip

A border-image is not clipped by border-radius in the same way as an ordinary background and border; use another wrapper approach when rounded gradient corners are needed.

Try It Yourself

Add a second border side while keeping the outline separate.