Borders, corners & outlines

border

Sets the width, style and colour of all four borders at once. Any part left out is reset to its initial value, so border: 2px solid gives a currentcolor border.

The four sides always get the same value. border also resets border-image to its initial value, so declare any border image after it.

border: 1px solid color-mix(in oklch, currentcolor 20%, transparent);

border-top, border-right, border-bottom, border-left

Set the width, style and colour of the border on one physical side.

border-block-start, border-block-end, border-inline-start, border-inline-end

Set the width, style and colour of the border on one flow-relative side. In left-to-right horizontal text these are the top, bottom, left and right borders.

border-inline-start: 4px solid var(--accent);

border-block, border-inline

Set the same width, style and colour on both borders in one axis: border-block sets block-start and block-end, border-inline sets inline-start and inline-end.

border-color

Shorthand for the colours of the four physical borders. One value sets all four sides; two set top/bottom then left/right; three set top, left/right, bottom; four go clockwise from the top.

border-style

Shorthand for the line style of the four physical borders, taking one to four values in the same order as border-color. A border is only drawn when its style is something other than none or hidden.

border-width

Shorthand for the thickness of the four physical borders, taking one to four values in the same order as border-color.

border-block-color, border-inline-color

Set the colours of both borders in one flow-relative axis. One value sets both sides; two set the start side then the end side.

border-block-style, border-inline-style

Set the line styles of both borders in one flow-relative axis. One value sets both sides; two set the start side then the end side.

border-block-width, border-inline-width

Set the thickness of both borders in one flow-relative axis. One value sets both sides; two set the start side then the end side.

border-top-color, border-right-color, border-bottom-color, border-left-color

The colour of the border on one physical side. The initial currentcolor means a border with no colour set matches the text.

border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color

The colour of the border on one flow-relative side.

border-top-style, border-right-style, border-bottom-style, border-left-style

The line style of the border on one physical side. The values are listed under border-style.

border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style

The line style of the border on one flow-relative side.

border-top-width, border-right-width, border-bottom-width, border-left-width

The thickness of the border on one physical side: a non-negative length, or one of the keywords thin (1px), medium (3px) and thick (5px).

The width computes to 0 while the matching style is none or hidden, which is why border-width: 2px on its own draws nothing.

border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width

The thickness of the border on one flow-relative side.

border-radius

Shorthand for the four physical corner radii. Values go clockwise from the top-left corner, with one to four values filled in the same way as margin. A slash separates the horizontal radii from the vertical radii, for elliptical corners.

The rounding clips the background, and also the content when overflow is not visible. If neighbouring radii add up to more than the side they share, all the radii are scaled down until they fit, which is why a very large value such as 999px gives a pill shape.

border-radius: 50%;           /* a circle, if the box is square */
border-radius: 1rem 1rem 0 0;   /* round the top corners only */
border-radius: 2rem / 1rem;     /* elliptical corners */

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

The radius of one physical corner. One value gives a circular corner; two give the horizontal then the vertical radius of an elliptical corner.

border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

The radius of one flow-relative corner. The first word is the block side and the second the inline side, so in left-to-right horizontal text border-start-end-radius is the top-right corner and border-end-start-radius the bottom-left.

corner-shape

Shorthand for the shape of the four physical corners, clockwise from the top-left. It changes the curve drawn inside the area that border-radius sets aside, so it has no visible effect on a corner whose radius is 0. The border, background, shadow and outline all follow the new shape.

border-radius: 2rem;
corner-shape: squircle;

corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape

Set the shape of the two corners on one physical side. One value sets both corners; two set them in order (left then right for the top and bottom sides, top then bottom for the left and right sides).

corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape

Set the shape of the two corners on one flow-relative side. One value sets both corners; two set the start corner then the end corner along that side.

corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape

The shape of one physical corner. The values are listed under corner-shape.

corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape

The shape of one flow-relative corner. As with the logical radii, the first word is the block side and the second the inline side.

border-image

Shorthand that draws an image in the border area in place of the border styles. The image is cut into nine pieces: four corners, four edges and a middle. The corners go in the border's corners and the edges are stretched or tiled along its sides.

With the default border-image-width of 1 the image is drawn at the border's own width, so the element still needs a border style and width. If the image fails to load, the ordinary border is drawn instead.

border: 12px solid transparent;
border-image: url(frame.png) 30 round;

border-image-source

The image to draw in the border area: a url(), a gradient or any other <image>. With none, the border styles are used.

border-image-slice

Where to cut the image into its nine pieces, as insets from the top, right, bottom and left edges (one to four values, in the same order as margin). A plain number is in the image's own pixels. The middle piece is thrown away unless fill is given, in which case it is drawn over the background.

border-image-width

How thick the border image is drawn on each side, which can differ from border-width. A plain number is a multiple of the border width; auto uses the natural size of the slice.

border-image-outset

How far the border image area reaches beyond the border box. A plain number is a multiple of the border width. The overhang does not affect layout.

border-image-repeat

How the edge pieces fill the length of each side. The first value applies to the top and bottom edges, the second to the left and right.

border-shape

Draws the border along a <basic-shape>, such as polygon() or shape(), instead of the box's rectangle. With one shape the border is stroked along it at the border width; with two, the border fills the area between the outer and the inner shape. The optional box keyword after each shape sets the box it is measured against.

outline

Shorthand for the width, style and colour of an outline: a line drawn just outside the border edge. An outline takes up no space and never moves anything, which makes it the usual way to show keyboard focus.

The shorthand itself has worked since Chrome 1, Firefox 1.5 and Safari 1.2. The versions above are the first in which the outline follows the box's border-radius instead of staying rectangular.

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

outline-color

The colour of the outline.

outline-style

The line style of the outline. It takes the same keywords as border-style except hidden, plus auto, which lets the browser draw its own focus-ring style.

outline-width

The thickness of the outline, taking the same lengths and keywords as the border widths. It computes to 0 while outline-style is none.

outline-offset

The gap between the border edge and the outline. A negative value draws the outline inside the border box.