Interactive Reference

Border
Explorer

Every border property — style, width, color, individual sides, border-radius shortcuts and elliptical values, outline, and border-image.

01 — Style

border-style

The style keyword defines the line type. none/hidden collapse the border entirely.

border-style playgroundsolid · dashed · dotted · double · groove · ridge · inset · outset · none
border-style
02 — Width

border-width

Width can be set uniformly, per axis, or each side independently using the 4-value shorthand.

border-width — all sides and individual sidestop · right · bottom · left · 1–4 value shorthand
all sides (uniform)
3px
individual sides
top
3px
right
3px
bottom
3px
left
3px
border-style
border-color
03 — Color

border-color per side

Each side can have its own color. The 4-value shorthand follows the top / right / bottom / left order.

per-side color playgroundborder-top-color · border-right-color · border-bottom-color · border-left-color
border-width
4px
border-style
04 — Sides

Shorthand value order

CSS shorthand follows clockwise from top. 1 value = all sides. 2 values = top-bottom / left-right. 3 values = top / left-right / bottom. 4 values = top / right / bottom / left.

1 value — all sides
border-width: 4px
all sides: 4px
2 values — TB / LR
border-width: 8px 2px
4 values — T / R / B / L
border-width: 8px 4px 2px 6px
↑8 →4 ↓2 ←6
05 — Radius

border-radius

Round individual corners or all at once. Each corner can have its own value.

border-radius — all cornersuniform · individual · % · px · elliptical
all corners (uniform)
12px
individual corners
top-left
12px
top-right
12px
bottom-right
12px
bottom-left
12px
presets
06 — Advanced Radius

Elliptical border-radius

The slash syntax — border-radius: Xpx / Ypx — gives each corner a different horizontal and vertical radius.

elliptical radius — horizontal / vertical axesborder-radius: a b c d / e f g h
horizontal radii (X axis)
TL-x
50%
TR-x
50%
BR-x
50%
BL-x
50%
vertical radii (Y axis)
TL-y
50%
TR-y
50%
BR-y
50%
BL-y
50%
presets
07 — Outline

outline vs border

outline is drawn outside the border and doesn't affect layout. Used commonly for focus states.

outline playgroundoutline · outline-style · outline-width · outline-offset · outline-color
outline-style
outline-width
3px
outline-offset
4px
outline-color
08 — Border Image

border-image

border-image replaces a border with a gradient or image. Great for decorative borders.

border-image examplesborder-image-source · border-image-slice · border-image-repeat
gradient border
linear-gradient(45deg, #c8f04a, #4af0c8) 1
rainbow
linear-gradient(135deg, #f04a9b, #a78bfa, #4af0c8)
conic
conic-gradient(...) 1
striped
repeating-linear-gradient(45deg, ...)
glow rings
box-shadow trick (stacked)
09 — Quick Reference

Complete Property Reference

Border Properties
propertyvalues
border[width] [style] [color] shorthand
border-stylenone | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset
border-widthpx | em | thin | medium | thick
border-colorany color value
Radius & Outline
propertyvalues
border-radiuspx | % | em — 1-4 values
border-radius (elliptical)a b c d / e f g h
outline[width] [style] [color]
outline-offsetpx — positive or negative
border-image[source] [slice] [width] [outset] [repeat]