Every border property — style, width, color, individual sides, border-radius shortcuts and elliptical values, outline, and border-image.
The style keyword defines the line type. none/hidden collapse the border entirely.
Width can be set uniformly, per axis, or each side independently using the 4-value shorthand.
Each side can have its own color. The 4-value shorthand follows the top / right / bottom / left 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.
Round individual corners or all at once. Each corner can have its own value.
The slash syntax — border-radius: Xpx / Ypx — gives each corner a different horizontal and vertical radius.
outline is drawn outside the border and doesn't affect layout. Used commonly for focus states.
border-image replaces a border with a gradient or image. Great for decorative borders.
| property | values |
|---|---|
| border | [width] [style] [color] shorthand |
| border-style | none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset |
| border-width | px | em | thin | medium | thick |
| border-color | any color value |
| property | values |
|---|---|
| border-radius | px | % | em — 1-4 values |
| border-radius (elliptical) | a b c d / e f g h |
| outline | [width] [style] [color] |
| outline-offset | px — positive or negative |
| border-image | [source] [slice] [width] [outset] [repeat] |