CSS border-block-start-color Property

CSS border-block-start-color

The border-block-start-color property in CSS specifies the color of an element’s block-start border. The block-start side depends on the element’s writing mode, directionality, and text orientation. This property allows you to control the color of the block-start border independently.

Syntax of border-block-start-color

</>

Copy

border-block-start-color: color | transparent | initial | inherit;

Values

Value	Description
`color`	Specifies the color of the block-start border. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255,0,0,0.5)`).
`transparent`	Makes the block-start border fully transparent.
`initial`	Sets the property to its default value (`currentColor`, which matches the current text color).
`inherit`	Inherits the value from its parent element.

Default Value

currentColor (inherits the current text color)

Examples for border-block-start-color

Using the CSS border-block-start-color Property

The following examples demonstrate how to use the border-block-start-color property to set the color of the block-start border.

</>

Copy

/* Set the block-start border color to blue */
.element {
  border-block-start-color: blue;
}

/* Make the block-start border color transparent */
.element {
  border-block-start-color: transparent;
}

/* Inherit the block-start border color from the parent */
.element {
  border-block-start-color: inherit;
}

/* Use a specific RGBA color for the block-start border */
.element {
  border-block-start-color: rgba(255, 0, 0, 0.5);
}

Example for a Red Block-Start Border

Below is an example demonstrating how to make the block-start border transparent using border-block-start-color: red:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    border-block-start: 5px solid;
    border-block-start-color: red;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for a RGBA Block-Start Border

border-block-start-color: rgba(0, 0, 255, 0.5);

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    border-block-start: 5px solid;
    border-block-start-color: rgba(0, 0, 255, 0.5);
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for a Transparent Block-Start Border

border-block-start-color: transparent;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    border-block-start: 5px solid;
    border-block-start-color: transparent;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-block-start-color property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	69.0
Edge	79.0
Firefox	41.0
Safari	12.1
Opera	56.0

TutorialKart

CSS border-block-start-color Property