Tillitsdone
down Scroll to discover

CSS border-block-start-width A Comprehensive Guide

Learn about CSS border-block-start-width, its use in defining logical block-start border width, and available options like length values and keywords.
thumbnail

Introduction

The border-block-start-width property in CSS sets the width of the logical block-start border of an element. This property adapts to the element’s writing mode, directionality, and text orientation, making it useful for responsive design. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property, depending on the text orientation and direction.

Baseline Widely Available

The border-block-start-width property has been widely supported since September 2021. For detailed compatibility information, refer to the Browser Compatibility section.

Description

The border-block-start-width CSS property sets the width of the logical block-start border of an element. This border corresponds to the top, right, bottom, or left border, depending on the element’s writing mode, directionality, and text orientation. This property helps create visually appealing and responsive designs, adapting to different layouts and text directions.

Syntax

/* <'border-width'> values */
border-block-start-width: 5px;
border-block-start-width: thick;


/* Global values */
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;

Explanation

  • <border-width> values: Specify the border width using lengths (e.g., 5px) or keywords like thin, medium, and thick.
  • Global values: Include inherit, initial, revert, revert-layer, and unset.

Values

The border-block-start-width property accepts values that define the width of the logical block-start border.

<border-width>

  • Length values: Specify the border width using units like pixels (px), ems (em), or percentages (%). 
    border-block-start-width: 5px;
    border-block-start-width: 2em;
    border-block-start-width: 10%;
  • Predefined keywords: thin, medium, thick. 
    border-block-start-width: thin;
    border-block-start-width: medium;
    border-block-start-width: thick;

Global Values

  • inherit: Inherits the value from the parent element. 
    border-block-start-width: inherit;
  • initial: Resets the property to its initial value (medium). 
    border-block-start-width: initial;
  • revert: Resets the property to the user agent’s default value. 
    border-block-start-width: revert;
  • revert-layer: Resets the property to the value established by the user-agent stylesheet or the user stylesheet. 
    border-block-start-width: revert-layer;
  • unset: Resets the property to its inherited value if it inherits, or to its initial value if it does not. 
    border-block-start-width: unset;

Formal Definition

PropertyValue
Initial valuemedium
Applies toAll elements
InheritedNo
PercentagesRefers to the logical width of the containing block
Computed valueAbsolute length; 0 if the border style is none or hidden
Animation typeBy computed value type

Formal Syntax

border-block-start-width = <line-width>


<line-width> =
  <length> |
  thin |
  medium |
  thick

Explanation

  • <line-width>: Defines the border width using a length value or keywords.
  • <length>: Represents a length value (e.g., 5px, 2em, 10%).
  • thin: Sets the border width to thin.
  • medium: Sets the border width to medium (default).
  • thick: Sets the border width to thick.

Examples

Basic Usage

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    div {
      border: 2px solid black;
      border-block-start-width: 5px;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>Hello, World!</div>
</body>
</html>

Using Predefined Keywords

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    .thin {
      border: 2px solid black;
      border-block-start-width: thin;
      background-color: lightblue;
      padding: 10px;
    }
    .medium {
      border: 2px solid black;
      border-block-start-width: medium;
      background-color: lightgreen;
      padding: 10px;
    }
    .thick {
      border: 2px solid black;
      border-block-start-width: thick;
      background-color: lightcoral;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="thin">Thin Border</div>
  <div class="medium">Medium Border</div>
  <div class="thick">Thick Border</div>
</body>
</html>

Vertical Text with border-block-start-width

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    div {
      background-color: yellow;
      width: 120px;
      height: 120px;
    }
    .exampleText {
      writing-mode: vertical-lr;
      border: 1px solid blue;
      border-block-start-width: 5px;
    }
  </style>
</head>
<body>
  <div>
    <p class="exampleText">Example text</p>
  </div>
</body>
</html>

Specifications

The border-block-start-width property is defined in the CSS Logical Properties and Values Level 1 specification.

Key Specification

  • CSS Logical Properties and Values Level 1: Includes detailed information about the border-block-start-width property. Refer to the CSS Logical Properties and Values Level 1 document for comprehensive details.

Browser Compatibility

The border-block-start-width property is widely supported across modern web browsers.

Supported Browsers

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

Browser Compatibility Data Tables

For detailed compatibility information, refer to resources like MDN Web Docs and Can I Use.

Tips for Ensuring Compatibility

  1. Check for Feature Support: Use tools like Can I Use to check for the support of the border-block-start-width property in different browsers.
  2. Fallback Styles: Implement fallback styles to ensure functionality in unsupported browsers.
  3. Test Across Browsers: Always test your web design across multiple browsers and versions.

See Also

Related CSS Properties

Related Specifications

Related Physical Border Properties

Related Writing Mode Properties

Additional Resources

  • MDN Web Docs: Comprehensive resource for learning about CSS.
  • Can I Use: Tool for checking CSS property compatibility.
icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
CSS property CSS animation
css_property_cover/css-property-border-block-end-style.png CSS Border-Block-End-Style Control Logical Block-End Border Learn about the CSS border-block-end-style property that controls the style of the logical block-end border of an element. Discover available options like none, solid, dashed, and more. css_property_cover/css-property-border-block-start.png CSS Border-Block-Start Simplified Border Styling CSS border-block-start is a versatile property for setting block-start border styles in a single declaration. Use it to simplify border definitions, adaptable to various writing modes and text orientations. Options include width, style, and color. css_property_cover/css-property-border-bottom-color.png CSS Border-Bottom-Color Customize Bottom Border Colors CSS border-bottom-color sets the color of an element's bottom border. Use named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA to customize the appearance. Learn about syntax, values, and examples. css_property_cover/css-property-border-color.png CSS Border-Color Enhance Border Appeal Learn how to use CSS border-color to enhance the visual appeal of your web designs. Explore available options like hex codes, RGB, RGBA, HSL, and HSLA. css_property_cover/css-property-border-image.png CSS Border-Image Enhance Design with Custom Borders Learn how to use the CSS border-image property to create visually appealing custom borders. Explore options like source, slice, width, outset, and repeat for unique designs. css_property_cover/css-property-border-image-repeat.png CSS Border-Image-Repeat Customizing Border Images CSS border-image-repeat allows customization of border images. Use options like stretch, repeat, round, and space to create unique designs. Enhance visuals with ease.
View all 337 CSS blogs
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
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
209 Articles
Explore right
icons/logo-react.svg ReactJs
Popular JavaScript library for building user interfaces with a component-based architecture.
169 Articles
Explore right
icons/flutter.svg Flutter
UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
150 Articles
Explore right
icons/logo-nodejs.svg Nodejs
JavaScript runtime for building scalable, high-performance server-side applications.
60 Articles
Explore right
icons/next-js.svg Nextjs
React framework enabling server-side rendering and static site generation for optimized performance.
40 Articles
Explore right
icons/code-outline.svg Typescript
Superset of JavaScript adding static types for improved code quality and maintainability.
39 Articles
Explore right
icons/tailwind.svg TailwindCSS
Utility-first CSS framework for rapid UI development.
130 Articles
Explore right
icons/code-outline.svg Golang
Programming language known for its simplicity, concurrency model, and performance.
70 Articles
Explore right
icons/code-outline.svg AstroJs
Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.
40 Articles
Explore right
icons/code-outline.svg Jest
Versatile testing framework for JavaScript applications supporting various test types.
337 Articles
Explore right
icons/css-4.svg CSS
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
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.
DesignRush web design companies DesignRush
web design companies Goodfirms Goodfirms
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.