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

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

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