CSS: Borders

Control the lines, corners, and shadows around every element.

border-width, border-style, border-color

A border is made of three components: its width, its style, and its color. All three must be set for the border to appear, the style is the most important, as without it no border renders even if width and color are set.

`Border Components`

border-style is required for a border to show. Without it, border-width and border-color have no effect.

border-width, thickness: thin, medium, thick, or a length (2px, 0.1rem)
border-style, solid, dashed, dotted, double, groove, ridge, inset, outset, none
border-color, any CSS color value; defaults to the element's color property
border-style is required, without it no border renders

Border Styles

Four common border-style values.

div { padding: 12px; margin-bottom: 8px; border-width: 3px; border-color: steelblue; }

.solid  { border-style: solid; }
.dashed { border-style: dashed; border-color: crimson; }
.dotted { border-style: dotted; border-color: green; }
.double { border-style: double; border-width: 6px; }

Border Shorthand

Instead of setting width, style, and color separately, the border shorthand sets all three in one declaration. The order is width style color.

`border shorthand`

The border shorthand applies the same width, style, and color to all four sides at once. Use individual side properties when you need different borders on different sides.

border: 2px solid black, 2px wide, solid line, black color
border: 1px dashed red, 1px wide, dashed line, red color
Order: width → style → color (only style is required)
border: none, removes all borders; useful for resetting input and button defaults

Border Shorthand

width, style, and color in one declaration.

div { padding: 12px; margin-bottom: 8px; border-radius: 4px; }

.a { border: 2px solid steelblue; }
.b { border: 3px dashed crimson; }
.c { border: 4px dotted green; }

Individual Borders

You can target each side of the border independently using border-top, border-right, border-bottom, and border-left.

`Individual Side Borders`

Setting borders on individual sides lets you create effects like bottom-only underlines, left accent bars, and asymmetric styling.

border-top: 2px solid red, top side only
border-left: 4px solid steelblue, common pattern for a left accent bar on cards
border-bottom: 1px solid #ccc, common separator line under headings or rows
Mix the shorthand with individual sides: set border: none then add border-bottom

Individual Borders

Bottom-only, left-only, and top+bottom border combinations.

div { padding: 12px; margin-bottom: 8px; }

.underline  { border-bottom: 2px solid steelblue; }
.accent     { border-left: 5px solid crimson; padding-left: 16px; background: #fff5f5; }
.top-bottom { border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; }

border-radius (Rounded Corners)

border-radius rounds the corners of an element's border box. It works even without a visible border, it also clips background colors and images.

`border-radius`

border-radius rounds corners by setting the radius of the arc at each corner. A single value applies to all four corners; you can also set them individually.

border-radius: 8px, all four corners rounded equally
border-radius: 50%, circle (on a square element) or ellipse (on a rectangle)
border-radius: 8px 0, top-left/bottom-right: 8px, top-right/bottom-left: 0
border-top-left-radius: 16px, target a single corner
border-radius clips overflow content, combine with overflow: hidden on images

border-radius

Slight rounding, pill, circle, and mixed corner radii.

div {
  display: inline-block;
  padding: 12px 20px;
  margin: 6px;
  background: steelblue;
  color: white;
  font-weight: bold;
}

.slight { border-radius: 6px; }
.pill   { border-radius: 999px; }
.circle { border-radius: 50%; width: 60px; height: 60px;
          display: flex; align-items: center; justify-content: center; padding: 0; }
.mixed  { border-radius: 16px 4px; }

border-image (Advanced)

border-image replaces the solid border color with an image or gradient sliced across the border area. It is an advanced effect used for decorative borders.

`border-image`

border-image slices an image or gradient into nine sections and maps them onto the border. The most common modern use is border-image with a gradient.

border-image-source, the image or gradient to use
border-image-slice, how to divide the image into the nine regions (number or %)
border-image-width, the rendered width of the border image
border-image-repeat, stretch, repeat, or round the middle sections
Shorthand: border-image: source slice / width repeat

border-image with Gradient

A gradient used as a border via border-image.

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, steelblue, mediumslateblue) 1;
  padding: 14px;
  margin-bottom: 10px;
}

.rainbow-border {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, violet) 1;
  padding: 14px;
}

outline vs border

outline looks similar to border but has one crucial difference, it does not take up space in the layout. It is drawn outside the border without affecting surrounding elements.

`outline vs border`

outline is mainly used for focus indicators (keyboard navigation). It does not affect layout, cannot be set per-side, and does not respect border-radius in all browsers.

outline, outside the border; no layout impact; same shorthand syntax as border
border, inside the box model; takes up space; can be set per side
outline-offset, adds gap between the element and the outline
Never remove outline on focused elements without providing an alternative, it is a key accessibility feature
Use outline for debugging: outline: 2px solid red shows element boundaries without shifting layout

outline vs border

Border shifts layout; outline sits outside without affecting spacing.

.with-border  {
  border: 4px solid steelblue;
  padding: 12px;
  margin-bottom: 8px;
}

.gap { height: 8px; }

.with-outline {
  outline: 4px solid crimson;
  outline-offset: 4px;
  padding: 12px;
}

Box Shadows (box-shadow)

box-shadow adds a shadow behind an element. Multiple shadows can be stacked with commas, and the inset keyword creates an inner shadow.

`box-shadow`

box-shadow takes: offset-x, offset-y, blur-radius, spread-radius, and color. All except offset-x and offset-y are optional.

offset-x, horizontal distance; positive = right, negative = left
offset-y, vertical distance; positive = down, negative = up
blur-radius, 0 = sharp edge; higher = softer and more spread
spread-radius, expands or shrinks the shadow size
inset, keyword that makes the shadow appear inside the element

box-shadow

Soft, hard, inset, and layered shadow variations.

div {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: white;
  font-weight: bold;
}

.soft    { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.hard    { box-shadow: 4px 4px 0 steelblue; }
.inset   { box-shadow: inset 0 2px 8px rgba(0,0,0,0.2); background: #f0f8ff; }
.layered { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15); }

Knowledge Check

1. Which border-style value creates a dashed border?

2. What does border-radius: 50% do on a square element?

3. What is the key difference between outline and border?

4. In box-shadow: 4px 8px 10px 2px rgba(0,0,0,0.3), what does the fourth value (2px) control?

5. Which shorthand correctly sets a 2px solid blue border?

Previous Next