Borders and Outlines: Complete Reference

Borders and outlines are both drawn around elements, but they work very differently — especially when it comes to layout impact, accessibility, and the creative possibilities they unlock.

1. Border Basics

The border property adds a visible line around an element's padding. It has three sub-properties: width, style, and color.

/* Shorthand: width style color */
.box { border: 2px solid #6c63ff; }

/* Longhand */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #6c63ff;
}

/* Individual sides */
.box {
  border-top:    2px solid var(--color-primary);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   4px solid var(--color-primary);  /* Left accent border */
}

2. Border Styles Reference

.solid   { border-style: solid; }   /* ──────── Most common */
.dashed  { border-style: dashed; }  /* - - - - - */
.dotted  { border-style: dotted; }  /* ........ */
.double  { border-style: double; }  /* ══════ */
.groove  { border-style: groove; }  /* 3D carved in */
.ridge   { border-style: ridge; }   /* 3D protruding */
.inset   { border-style: inset; }   /* 3D pressed in  */
.outset  { border-style: outset; }  /* 3D raised */
.none    { border-style: none; }    /* No border */
.hidden  { border-style: hidden; }  /* Hidden (same as none, different for table borders) */

3. border-radius — Rounded Corners

/* All corners equal */
.btn     { border-radius: 8px; }
.pill    { border-radius: 9999px; }  /* Full pill/capsule shape */
.circle  { border-radius: 50%; }     /* Circle (requires equal width/height) */

/* Individual corners: top-left | top-right | bottom-right | bottom-left */
.chat-bubble { border-radius: 16px 16px 4px 16px; }

/* Elliptical corners: horizontal-radius / vertical-radius */
.leaf { border-radius: 50% 0 50% 0; }

/* Modern shorthand for directional corners */
.card { border-radius: var(--radius-sm) var(--radius-lg); }

4. Creative Border Techniques

Left Accent Border (Blockquote/Feature Style)

.feature {
  border-left: 4px solid var(--color-primary);
  padding-left: 1.5rem;
  margin-left: 0;
}

Card with Top Color Accent

.card {
  border-top: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md); /* Only bottom rounded */
}

Gradient Border (using background trick)

.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(135deg, #6c63ff, #00ff87) border-box;
  border-radius: 12px;
}

Inner Border Using box-shadow

box-shadow with inset and no offset creates a border without affecting layout:

.inset-border {
  box-shadow: inset 0 0 0 2px var(--color-primary); /* 2px inset border */
}
/* Useful for hover and focus states where changing border width shifts layout */
.btn:focus {
  box-shadow: inset 0 0 0 2px var(--color-primary); /* No layout shift */
}

5. outline — The Keyboard Focus Indicator

Outline is drawn outside the border and does not affect layout. It is the default focus indicator in browsers.

/* Custom focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;   /* Gap between element edge and outline */
  border-radius: var(--radius-sm); /* Rounded outline (matches element) */
}

/* Remove default outline ONLY when providing a custom one */
button:focus { outline: none; }           /* ❌ NEVER do this alone */
button:focus-visible { outline: 2px solid var(--color-primary); } /* ✅ Correct approach */

[!CAUTION] Never use outline: none without a visible alternative. This breaks keyboard navigation for users who rely on it — a significant WCAG accessibility violation. Use :focus-visible to target keyboard focus only.

6. Border vs Outline Comparison

Feature	border	outline
Affects layout	✅ Takes up space	❌ No layout impact
Can style each side	✅ Yes	❌ Surrounds entire element
Follows border-radius	✅ Yes	✅ (in modern browsers)
Can be offset	❌ No	✅ outline-offset
Animatable smoothly	✅ Yes	✅ Yes
GPU-composited animation	❌ Triggers paint	❌ Triggers paint
Primary purpose	Visual design	Accessibility (focus)
box-sizing included	✅ Yes	❌ No

7. border-image — Advanced Border Design

Use an image or gradient as the border:

.fancy-border {
  border: 10px solid transparent;
  border-image: linear-gradient(135deg, #6c63ff, #f5a623) 1;
}

/* With `border-image-slice` for precise control */
.image-border {
  border: 20px solid transparent;
  border-image-source: url('/borders/ornate-frame.png');
  border-image-slice: 30;
  border-image-repeat: stretch;
}

8. WordPress-Specific Border Patterns

/* Consistent card borders across GP/Bricks */
.card { border: 1px solid var(--color-border, rgba(255,255,255,0.08)); }

/* GeneratePress: override theme border on widgets */
.widget { border: none; border-left: 3px solid var(--color-primary); padding-left: 1rem; }

/* Focus indicator for GP navigation */
.main-navigation a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}