rick@tillitsdone.com

+66824564755

Scroll to discover

CSS border-inline-width Manage Logical Border Widths

CSS border-inline-width lets you manage the width of logical inline borders for flexible and responsive designs.

Use length values, keywords, and global values.

Introduction

The border-inline-width CSS property lets you define the width of the logical inline borders of an element. This is super useful for making sure your border widths are consistent across different text directions and writing modes. It’s been reliably available since September 2021 and works well across many devices and browsers.

Description

The border-inline-width property helps you set the width of the logical inline borders of an element. It adapts based on the writing mode, text direction, and orientation of the element. This makes it a versatile tool for ensuring consistent border styles in various layouts.

Syntax

The border-inline-width property is easy to use. Here’s the basic syntax:

/* Using length values */
border-inline-width: 5px 10px;
border-inline-width: 5px;

/* Using predefined keywords */
border-inline-width: thick;

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

Values

You can use different types of values with border-inline-width:

Length Values

Use units like px, em, rem, etc.

border-inline-width: 5px;
border-inline-width: 10px 20px;

Predefined Keywords

Use keywords like thin, medium (default), or thick.

border-inline-width: thin;
border-inline-width: thick;

Global Values

Global values like inherit, initial, revert, revert-layer, and unset.

border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;

Examples

Here are some practical examples to show how border-inline-width works:

Setting Border Width Using Length Values

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-inline-width Property</title>
    <style>
        h1 {
            color: green;
        }
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px dashed cyan;
            border-inline-width: 2px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <center>
        <h1>Website</h1>
        <b>CSS border-inline-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>
</html>

Setting Border Width Using Predefined Keywords

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-inline-width Property</title>
    <style>
        h1 {
            color: green;
        }
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px solid cyan;
            border-inline-width: thick;
            background-color: purple;
        }
    </style>
</head>
<body>
    <center>
        <h1>Website</h1>
        <b>CSS | border-inline-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>
</html>

Formal Definition

The border-inline-width property is formally defined to specify the width of the logical inline borders of an element. Here are the key characteristics:

Initial Value	`medium`
Applies To	All elements
Inherited	No
Percentages	Logical width of containing block
Computed Value	Absolute length; `0` if the border style is `none` or `hidden`
Animation Type	By computed value type

Specifications

The border-inline-width property is defined in the CSS Logical Properties and Values Level 1 specification:

CSS Logical Properties and Values Level 1:
- Property Definition: border-inline-width

Browser Compatibility

The border-inline-width property is widely supported across major browsers:

Google Chrome: Supported
Microsoft Edge: Supported
Mozilla Firefox: Supported
Opera: Supported
Safari: Supported

For detailed compatibility information, you can refer to the following resources:

Formal Syntax

The formal syntax for the border-inline-width property defines how you can specify the width of the logical inline borders of an element. Here is the formal syntax for border-inline-width:

border-inline-width = <'border-width'>{1,2}

Where <'border-width'> can be one of the following:

<'border-width'> = <length [0,∞]> | thin | medium | thick

Explanation

Length Values: You can specify the border width using length units such as px, em, rem, etc. For example:
```
border-inline-width: 5px;
border-inline-width: 10px 20px;
```
Predefined Keywords: You can also use predefined keywords to set the border width:
- thin
- medium (default value)
- thick For example:
```
border-inline-width: thin;
border-inline-width: thick;
```
Global Values: Global values allow you to inherit, reset, or unset the border width:
- inherit: Inherits the border width from the parent element.
- initial: Resets the border width to its initial value.
- revert: Resets the border width to the user agent’s default.
- revert-layer: Resets the border width to the value specified in the nearest ancestor’s cascade layer.
- unset: Resets the border width to its inherited value if it is inheritable; otherwise, it resets to the initial value. For example:
```
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;
```

By adhering to these formal definitions and syntax, you can ensure that your use of the border-inline-width property is both accurate and effective, leading to consistent and adaptable border styling in your web projects.

Supported Browsers

The border-inline-width property is supported by major browsers, including:

Reference

For more detailed information, you can refer to the official documentation:

MDN Web Docs - border-inline-width

These examples demonstrate how to use the border-inline-width property effectively in your CSS, ensuring consistent and adaptable border styling across different writing modes and text directions.

Specifications

The border-inline-width property is defined in the CSS Logical Properties and Values Level 1 specification. This specification outlines the behavior and syntax of the property, ensuring consistency across different web standards.

Here is the relevant specification for border-inline-width:

CSS Logical Properties and Values Level 1:
- Property Definition: border-inline-width

This specification provides a comprehensive guide on how the border-inline-width property should be implemented and used, ensuring that web developers can rely on consistent behavior across different browsers and platforms.

By adhering to these specifications, you can ensure that your use of the border-inline-width property is both accurate and effective, leading to consistent and adaptable border styling in your web projects.

Browser Compatibility

The border-inline-width property is widely supported across many browsers, making it a reliable choice for web developers and designers. Below is a summary of the browser compatibility for this property:

Google Chrome: Supported
Microsoft Edge: Supported
Mozilla Firefox: Supported
Opera: Supported
Safari: Supported

For detailed compatibility information, you can refer to the following resources:

MDN Web Docs - Browser Compatibility

Help Improve MDN

Was this page helpful to you?

Yes
No

Learn how to contribute

This page was last modified on Jul 18, 2023 by MDN contributors.

View this page on GitHub

Report a problem with this content

This section provides additional resources and ways to contribute to the improvement of MDN documentation, ensuring that it remains a valuable resource for web developers and designers.

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-anchor-name.png

CSS Anchor-Name Enhancing Web Layouts with Anchors Discover the CSS anchor-name property, a powerful tool for defining elements as anchors and creating dynamic, responsive web layouts. Learn about its use cases, available options, and how to effectively implement it in your projects.

css_property_cover/css-property-inset.png

CSS Inset Simplify Element Positioning Learn how to use the CSS inset property to easily set the top, right, bottom, and left offsets of an element. Discover available options, examples, and browser compatibility.

css_property_cover/css-property-overflow-y.png

CSS Overflow-y Managing Vertical Content Overflow Discover the CSS overflow-y property for managing vertical content overflow. Learn about its use cases, available options like visible, hidden, scroll, auto, and clip, and how to implement them effectively.

css_property_cover/css-property-padding-left.png

Understanding CSS padding-left for Better Web Design Learn how to use the CSS padding-left property to control the space between content and the left border of an element. Explore length, percentage, and global value options.

css_property_cover/css-property-animation-fill-mode.png

CSS Animation-Fill-Mode Control Animation Styles Learn how to use the CSS animation-fill-mode property to control the styles of elements before and after animations. Discover available options like forwards, backwards, both, and more.

css_property_cover/css-property-bottom.png

CSS Bottom Property A Comprehensive Guide The CSS bottom property controls the vertical positioning of elements. Use it with absolute, fixed, relative, or sticky positioning. Options include auto, length, percentage, inherit, and initial.

View all 337 CSS blogs

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

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

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

Facebook Instagram LinkedIn

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

Goodfirms

CSS border-inline-width Manage Logical Border Widths

Introduction

Description

Syntax

Values

Length Values

Predefined Keywords

Global Values

Examples

Setting Border Width Using Length Values

Setting Border Width Using Predefined Keywords

Formal Definition

Specifications

Browser Compatibility

Formal Syntax

Explanation

Supported Browsers

Reference

Specifications

Browser Compatibility

See Also

Help Improve MDN

Talk with CEO