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

border-block-end-style

Definition

The border-block-end-style CSS property sets the style of the block-end border of an element.

Examples

Set the block-end border to a solid style

div {
  border-block-end-style: solid;
  border-block-end-width: 2px;
  border-block-end-color: red;
}

Set the block-end border to a dashed style

div {
  border-block-end-style: dashed;
  border-block-end-width: 2px;
  border-block-end-color: green;
}

Set the block-end border to a dotted style

div {
  border-block-end-style: dotted;
  border-block-end-width: 2px;
  border-block-end-color: blue;
}

Set the block-end border to a double style

div {
  border-block-end-style: double;
  border-block-end-width: 2px;
  border-block-end-color: orange;
}

Set the block-end border to a groove style

div {
  border-block-end-style: groove;
  border-block-end-width: 2px;
  border-block-end-color: purple;
}

Set the block-end border to a ridge style

div {
  border-block-end-style: ridge;
  border-block-end-width: 2px;
  border-block-end-color: pink;
}

Set the block-end border to an inset style

div {
  border-block-end-style: inset;
  border-block-end-width: 2px;
border-block-end-color: yellow;
}

Set the block-end border to an outset style

div {
border-block-end-style: outset;
border-block-end-width: 2px;
border-block-end-color: black;
}

Values

ValueDescription
noneNo border is drawn
hiddenSame as none, except in terms of layout
dottedThe border is a series of dots
dashedThe border is a series of short lines
solidThe border is a solid line
doubleThe border is two solid lines
grooveThe border looks like it is carved into the element
ridgeThe border looks like it is coming out of the element
insetThe border makes the element look like it is embedded in the page
outsetThe border makes the element look like it is coming out of the page
initialSets the border style to its default value
inheritInherits the border style from the parent element

Best Practices

  • Use the border-block-end shorthand property to set all of the block-end border properties in one declaration, rather than setting each property separately. This makes your code more concise and easier to read.
  • Use vendor prefixes to ensure that your border styles are applied consistently across different browsers. The border-block-end-style property is part of the CSS Logical Properties and Values module, which is not fully supported by all browsers.
  • Use the none value to remove the block-end border entirely. This can be useful if you want to toggle the visibility of the border using JavaScript.
  • Consider using a consistent border style for your elements to create a cohesive design. You can define your border styles in a separate stylesheet or using CSS variables to make it easier to maintain and update your border styles.

Browser Compatibility

Browserborder-block-end-style Support
Google ChromeFull support
Mozilla FirefoxFull support with vendor prefix
Apple SafariFull support with vendor prefix
Microsoft EdgeFull support with vendor prefix
Google Chrome (Mobile)Full support
Mozilla Firefox (Mobile)Full support with vendor prefix
Apple Safari (Mobile)Full support with vendor prefix

Note that some older versions of these browsers may not support border-block-end-style.