CSS Borders – Styles, Radius, Outline & box-shadow

Border Shorthand

The border shorthand sets width, style, and color in one declaration:

CSS – border shorthand

/* border: width style color */
border: 1px solid #ccc;
border: 2px solid #1572B6;
border: 3px dashed #e63946;
border: 2px dotted #888;
border: none;         /* removes border */
border: 0;            /* same as none */

Border Style

The border-style property is required — without it, no border shows. Available styles:

CSS – Border styles

border-style: solid;    /* — continuous line (most common) */
border-style: dashed;   /* - - - dashes */
border-style: dotted;   /* . . . dots */
border-style: double;   /* === double line */
border-style: groove;   /* 3D carved-in effect */
border-style: ridge;    /* 3D raised effect */
border-style: inset;    /* 3D inset effect */
border-style: outset;   /* 3D outset effect */
border-style: hidden;   /* like none but affects border conflict resolution in tables */
border-style: none;     /* default — no border */

solid

dashed

dotted

double

groove

ridge

Individual Sides

Apply different borders to each side:

CSS – Per-side borders

/* Individual shorthand per side */
border-top:    2px solid #1572B6;
border-right:  none;
border-bottom: 1px solid #eee;
border-left:   4px solid #1572B6;   /* left accent bar */

/* Longhand — individual components per side */
border-top-width: 2px;
border-top-style: solid;
border-top-color: #1572B6;

/* Underline effect — bottom only */
.section-title {
  border-bottom: 3px solid #1572B6;
  padding-bottom: 8px;
}

/* Left accent bar — common in articles */
blockquote {
  border-left: 4px solid #1572B6;
  padding-left: 16px;
  margin-left: 0;
  color: #555;
  font-style: italic;
}

/* Remove only one side's border */
.table-cell { border: 1px solid #eee; border-left: none; }

border-radius – Rounded Corners

border-radius rounds the corners of an element's border box. Works even if there is no visible border.

CSS – border-radius

/* All corners equal */
border-radius: 4px;     /* subtle rounding */
border-radius: 8px;     /* card-level rounding */
border-radius: 12px;    /* rounder cards */
border-radius: 50%;     /* perfect circle (on square element) */
border-radius: 9999px;  /* pill shape on any element */

/* Two values: top-left/bottom-right | top-right/bottom-left */
border-radius: 12px 4px;

/* Four values (clockwise from top-left) */
border-radius: 12px 8px 4px 8px;

/* Longhand — individual corners */
border-top-left-radius:     12px;
border-top-right-radius:    12px;
border-bottom-right-radius: 0;
border-bottom-left-radius:  0;
/* = only top corners rounded — like a tab */

/* Elliptical corners — horizontal/vertical radii */
border-radius: 50% / 30%;   /* squashed ellipse */
border-top-left-radius: 80px 40px;  /* wide, short curve */

4px

12px

pill

50%

outline – The Accessible Focus Ring

outline is similar to border but draws outside the border, does not take up space in the layout (doesn't affect dimensions), and is used primarily for focus indicators. Never remove it without a replacement.

CSS – outline

/* outline: width style color */
outline: 2px solid #1572B6;
outline: 3px dashed orange;
outline: none;   /* dangerous without a replacement! */

/* Separate properties */
outline-width: 3px;
outline-style: solid;
outline-color: #1572B6;

/* Offset — gap between element edge and outline */
outline-offset: 4px;   /* 4px gap between element and the outline ring */

/* Correct focus styling — visible, not distracting */
button:focus-visible {
  outline: 3px solid #1572B6;
  outline-offset: 2px;
  border-radius: 4px;   /* outline follows border-radius */
}

/* :focus-visible = only shows for keyboard navigation, not mouse clicks */
/* More refined than :focus which shows for both */

/* Remove default AND replace with custom — NEVER just remove */
button:focus { outline: none; }                     /* ❌ breaks accessibility */
button:focus { outline: 3px solid #1572B6; }        /* ✅ keeps accessibility */

⚠️

Never use outline: none without a replacement

The default browser focus outline is critical for keyboard users and is an accessibility requirement (WCAG 2.4.7). Removing it without a replacement makes the site unusable for people who navigate by keyboard. If you dislike the default look, replace it with a custom :focus-visible style — don't remove it.

box-shadow – Depth and Elevation

box-shadow adds shadow effects around an element's box. Unlike border, it doesn't affect layout — it's drawn outside the element without displacing other elements.

CSS – box-shadow syntax

/* box-shadow: offset-x offset-y blur spread color */
box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
/*           ↑     ↑   ↑    ↑    */
/*           right down blur color */

/* offset-x: horizontal offset (positive = right, negative = left) */
/* offset-y: vertical offset (positive = down, negative = up) */
/* blur: softness (0 = sharp, higher = softer) */
/* spread: size expansion (positive = bigger, negative = smaller) */

/* Common shadow levels (elevation system) */
.shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.shadow     { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.shadow-md  { box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.shadow-lg  { box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.shadow-xl  { box-shadow: 0 16px 48px rgba(0,0,0,.2); }

/* Inset shadow — shadow inside the element */
.inset { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

/* Multiple shadows — comma separated */
.glow {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.15),
    0 0 0 4px rgba(21,114,182,0.2);  /* focus ring glow */
}

/* Colored shadow */
.card-blue {
  box-shadow: 0 8px 32px rgba(21, 114, 182, 0.3);
}

/* Remove shadow */
box-shadow: none;

shadow-sm

shadow

shadow-md

shadow-lg

colored

Creative Border Techniques

CSS – Creative patterns

/* Gradient border using outline trick */
.gradient-border {
  border: 3px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #1572B6, #FFD43B) border-box;
}

/* CSS triangle — using border trick */
.triangle-down {
  width: 0;
  height: 0;
  border-left:  10px solid transparent;
  border-right: 10px solid transparent;
  border-top:   16px solid #1572B6;
}

/* Card with colored top border */
.feature-card {
  border: 1px solid #eee;
  border-top: 4px solid #1572B6;
  border-radius: 0 0 8px 8px;
}

/* Divider line with text in middle */
.divider {
  border: none;
  border-top: 1px solid #eee;
  text-align: center;
  overflow: visible;
}
.divider::after {
  content: attr(data-text);
  background: white;
  padding: 0 12px;
  position: relative;
  top: -0.7em;
  color: #888;
  font-size: .85rem;
}

📋 Summary

border shorthand: width style color — style is required, without it nothing shows.
Border styles: solid, dashed, dotted, double, groove, ridge, inset, outset.
Individual sides: border-top, border-right, border-bottom, border-left.
border-radius: round corners. 50% for circles, 9999px for pills.
outline: like border but outside, no layout impact. Essential for keyboard focus. Never remove without replacement.
outline-offset: gap between element and the outline ring.
box-shadow: x y blur spread color. Use inset for inner shadow. Multiple shadows via commas.
Shadows don't affect layout — they're purely visual and drawn on top.

Frequently Asked Questions

What is the difference between border and outline? +

Border is part of the box model — it takes up space and affects layout. It renders between padding and margin. You can have different borders on each side and animate its width. Outline is drawn outside the border, takes up no space (doesn't affect layout), and cannot have different values per side. Outline is primarily used for focus indicators. Neither box-shadow nor outline affect layout — they overlap other elements visually.

How do I make a circle in CSS? +

Set equal width and height, then border-radius: 50%: .circle { width: 100px; height: 100px; border-radius: 50%; background: #1572B6; }. The element must be square for 50% to produce a perfect circle — on a rectangular element it produces an ellipse. If the element doesn't have a fixed size, use aspect-ratio: 1 to enforce squareness.

How do I add multiple box shadows? +

Comma-separate them: box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 3px rgba(21,114,182,0.2);. Shadows are drawn in order — first listed is on top. A common pattern combines a soft diffuse shadow (elevation) with a precise ring (focus indicator). Multiple shadows can create sophisticated depth effects like neumorphism.

Does border-radius work with background images? +

Yes — border-radius clips the entire element including its background. .avatar { width: 64px; height: 64px; border-radius: 50%; background-image: url('face.jpg'); background-size: cover; } creates a circular clipped image. If using an <img> tag instead of background-image, you need to add overflow: hidden to the parent container (or set border-radius directly on the <img> element).