1. css
  2. /properties
  3. /border-block-start-style

border-block-start-style

Definition

The border-block-start-style CSS property defines the style of the border on the start side of an element. It is used to specify the style of the border on the start side of an element, which is the side that starts in the block direction.

Examples

Apply a solid border to the start side of the element

.my-element {
  border-block-start-style: solid;
}

Apply a dashed border to the start side of the element

.my-element {
  border-block-start-style: dashed;
}

Apply a dotted border to the start side of the element

.my-element {
  border-block-start-style: dotted;
}

Apply a double border to the start side of the element

.my-element {
  border-block-start-style: double;
}

Apply a groove border to the start side of the element

.my-element {
  border-block-start-style: groove;
}

Apply a ridge border to the start side of the element

.my-element {
  border-block-start-style: ridge;
}

Apply an inset border to the start side of the element

.my-element {
  border-block-start-style: inset;
}

Apply an outset border to the start side of the element

.my-element {
  border-block-start-style: outset;
}

Values

ValueDescription
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.

Best Practices

  • Use the border-block-start shorthand property instead of the individual properties (border-block-start-width, border-block-start-style, and border-block-start-color) whenever possible, as it is easier to read and maintain.
  • Use the border-block-start-style property in conjunction with the border-block-start-width and border-block-start-color properties to fully specify the border on the start side of the element.
  • Avoid using excessively thick or thin borders, as they can make the element look disproportionate or unbalanced.
  • Use the border-block-start-style property in combination with other border properties (e.g., border-top, border-right, etc.) to create more complex border styles.
  • Remember that the border-block-start-style property is a part of the CSS Logical Properties and Values 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