Tillitsdone
down Scroll to discover

CSS border-block-start-color Enhance Web Design

The CSS border-block-start-color property sets the color of the logical block-start border of an element.

Useful for responsive designs, it adapts to writing modes and directions.

Available options include specific colors and global values.
thumbnail

Syntax

The border-block-start-color property in CSS is used to set the color of the logical block-start border of an element. This property can take various values, including specific colors and global values. Below is the syntax for using border-block-start-color:

border-block-start-color: blue;
border-block-start-color: #4c5d21;
/* Global values */
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;

Values

The border-block-start-color property accepts the following values:

  • <color>: This value specifies the color of the border. It can be any valid CSS color value, including named colors, hex codes, RGB, RGBA, HSL, HSLA, and more.

Example:

border-block-start-color: blue;
border-block-start-color: #4c5d21;
  • Global values: These values include inherit, initial, revert, revert-layer, and unset. They are used to control the inheritance and resetting of the property.

Example:

border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;

Formal Definition

The border-block-start-color property in CSS defines the color of the logical block-start border of an element. This property is highly adaptable and maps to different physical border colors based on the element’s writing mode, directionality, and text orientation. Here are the key details of its formal definition:

  • Initial Value: currentcolor
  • Applies to: All elements.
  • Inherited: No.
  • Computed Value: Computed color.
  • Animation Type: By computed value type.

The formal syntax for border-block-start-color is as follows:

border-block-start-color = <color>

Where:

  • <color>: This value specifies the color of the border. It can be any valid CSS color value, including named colors, hex codes, RGB, RGBA, HSL, HSLA, and more.

Examples

The border-block-start-color property in CSS is a versatile tool for customizing the appearance of borders in web design. Below are some examples to illustrate how this property can be used to enhance the visual appeal of elements.

Example 1: Basic Usage

This example demonstrates how to set the border-block-start-color for a simple HTML element.

HTML

<div>
<p class="exampleText">Example text</p>
</div>

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
border: 10px solid blue;
border-block-start-color: red;
}

Result

In this example, the border-block-start-color is set to red, which will affect the top border color of the text element based on the default writing mode.

Example 2: Vertical Text

This example shows how to use border-block-start-color with vertical text.

HTML

<div>
<p class="exampleText">Example text</p>
</div>

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 10px solid blue;
border-block-start-color: red;
}

Result

In this example, the writing-mode is set to vertical-lr, which makes the text flow vertically from top to bottom. The border-block-start-color is set to red, affecting the left border color in this vertical layout.

Example 3: Global Values

This example illustrates the use of global values with border-block-start-color.

HTML

<div>
<p class="exampleText">Example text</p>
</div>

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
border: 10px solid blue;
border-block-start-color: inherit;
}

Result

In this example, the border-block-start-color is set to inherit, which means it will inherit the border color from its parent element. This can be useful for maintaining a consistent design across multiple elements.

These examples demonstrate how the border-block-start-color property can be used to create dynamic and responsive border colors in web design. By utilizing this property, you can ensure that your designs are visually appealing and adaptable to different writing modes and directions.

Browser Compatibility

The border-block-start-color property is widely supported across many devices and browser versions. It has been available since September 2021, ensuring that it works seamlessly across different platforms and environments. Here is a summary of the browser compatibility for this property:

  • Chrome: Supported since version 69.
  • Firefox: Supported since version 41.
  • Opera: Supported since version 56.
  • Edge: Supported since version 79.
  • Safari: Supported since version 12.1.

For the most up-to-date information on browser compatibility, you can refer to the official MDN Web Docs page or the Can I Use website.

The border-block-start-color property is part of a broader set of CSS properties that define the colors of the logical borders of an element. These properties are designed to work together to create cohesive and responsive layouts. Below are some related properties that you might find useful in web development and design:

Examples

Here are some examples of how to use these properties:

border-block-end-color: green;
border-inline-start-color: purple;
border-inline-end-color: orange;
border-top-color: blue;
border-right-color: red;
border-bottom-color: green;
border-left-color: yellow;
writing-mode: vertical-lr;
direction: rtl;
text-orientation: upright;

Supported Browsers

The border-block-start-color property is well-supported across major browsers:

  • Chrome: Since version 69.
  • Firefox: Since version 41.
  • Opera: Since version 56.
  • Edge: Since version 79.
  • Safari: Since version 12.1.

For the latest browser compatibility info, visit the official MDN Web Docs page or Can I Use.

This wide support makes border-block-start-color a reliable choice for creating consistent and attractive web designs.

icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.