The border-block shorthand sets the width, style, and color of both logical block-axis border sides (block-start + block-end) at once. The value applies to both; for different per-side values, use border-block-start and border-block-end separately..box {
border-block: 2px solid teal;
}.box {
border-block: thick double oklch(0.55 0.18 200);
}min:0max:9999step:1units:px | em | rem | pt | vw | vh | vmin | vmaxhairlineThinnest line (new in L4).thinThin width.mediumMedium width (default).thickThick width.noneNo border (default).hiddenHidden border.dottedDotted line.dashedDashed line.solidSolid line.doubleDouble line.groove3D grooved effect.ridge3D ridged effect.insetBorder appears inset.outsetBorder appears outset.currentColorCurrent color value (default).transparentFully transparent color.rgb()RGB color function.hsl()HSL color function.hwb()HWB color function.lab()CIE Lab color function.lch()CIE LCH color function.oklab()Oklab color function.oklch()Oklch color function.color()Generic color function for custom color spaces.light-dark()Selects between two color values per color-scheme.CSS Borders Module Level 4Working Draft<line-width> <line-style> <color>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
