1. css
  2. /properties
  3. /border-block-end

border-block-end

Definition

The border-block-end CSS property is a shorthand property for setting the border-block-end-width, border-block-end-style, and border-block-end-color properties in a single declaration. It is used to specify the border on the end side of an element.

Examples

Apply a thin, solid, red border to the end side of the element

.my-element {
  border-block-end: thin solid red;
}

Apply a medium, dotted, green border to the end side of the element

.my-element {
  border-block-end: medium dotted green;
}

Apply a thick, dashed, blue border to the end side of the element

.my-element {
  border-block-end: thick dashed blue;
}

Apply a custom width (5px), solid, black border to the end side of the element

.my-element {
  border-block-end: 5px solid black;
}

Apply a medium, double, orange border to the end side of the element

.my-element {
  border-block-end: medium double orange;
}

Apply a medium, inset, purple border to the end side of the element

.my-element {
  border-block-end: medium inset purple;
}

Apply a medium, outset, yellow border to the end side of the element

.my-element {
  border-block-end: medium outset yellow;
}

Values

ValueDescription
thinThin border.
mediumMedium border.
thickThick border.
noneNo border.
hiddenSame as none, except in terms of border conflict resolution for table elements.
dottedDotted border.
dashedDashed border.
solidSolid border.
doubleDouble border.
groove3D grooved border. The effect depends on the border-color value.
ridge3D ridged border. The effect depends on the border-color value.
inset3D inset border. The effect depends on the border-color value.
outset3D outset border. The effect depends on the border-color value.
initialSets the property to its default value.
inheritInherits the value from the parent element.
colorSpecifies the border color. Can be any valid CSS color value.
styleSpecifies the border style. Can be any of the values listed above (e.g., dotted, solid, etc.).
widthSpecifies the border width. Can be a length value (e.g., 5px, 2em, etc.) or one of the predefined values (thin, medium, thick).

Best Practices

  • Use the border-block-end shorthand property instead of the individual properties (border-block-end-width, border-block-end-style, and border-block-end-color) whenever possible, as it is easier to read and maintain.
  • Use the border-block-end property in conjunction with other border properties (e.g., border-top, border-right, etc.) to create more complex border styles.
  • Avoid using excessively thick or thin borders, as they can make the element look disproportionate or unbalanced.
  • Use the border-block-end property in combination with other layout properties (e.g., grid-template-rows, grid-template-columns, etc.) to create a grid layout.
  • Remember that the border-block-end property is a part of the CSS Grid Layout module, and is not supported in all browsers. You may need to use vendor-specific prefixes to ensure compatibility with older browsers.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes