rick@tillitsdone.com

+66824564755

Scroll to discover

CSS border-inline-start Simplify Border Management

The 'css border-inline-start' property simplifies managing inline-start borders in web design.

It adapts to writing modes and directions, offering options for width, style, and color.

Introduction

The border-inline-start CSS property is a shorthand for setting the border properties at the start of the inline axis in a single declaration. It’s great for web development as it simplifies border styling based on the writing mode and text direction of an element.

Available since September 2021, border-inline-start is widely supported across devices and browsers, making it a reliable tool for consistent border styling.

Baseline Widely Available

The border-inline-start property has been widely available since September 2021, ensuring broad compatibility across different platforms. This means you can confidently use it in your projects without worrying about inconsistencies.

Overview of `border-inline-start`

The border-inline-start CSS property simplifies managing the inline-start border in web development. It sets the width, style, and color of the border at the start of the inline axis, adjusting based on the element’s writing mode and text direction.

Key Features:

Shorthand Property: Combines border width, style, and color.
Logical Border: Adjusts based on writing mode and directionality.
Broad Compatibility: Supported across many browsers and devices since September 2021.

Constituent Properties

The border-inline-start property is a shorthand for:

border-inline-start-color: Sets the border color.
border-inline-start-style: Defines the border style (e.g., solid, dashed).
border-inline-start-width: Specifies the border width.

Using border-inline-start, you can set all three properties in one line:

border-inline-start: 2px dashed blue;

Why Use Constituent Properties?

Using individual properties gives fine-grained control, but the shorthand border-inline-start is more efficient and reduces code. This is particularly useful in larger projects.

Syntax

The syntax for border-inline-start is:

border-inline-start: border-width border-style border-color;

Components of the Syntax

border-width: Specifies the border width (e.g., 1px, thin).
border-style: Defines the border style (e.g., solid, dashed).
border-color: Sets the border color (e.g., green, #ff0000).

Combining Properties

You can combine these properties in any order:

/* Set the width only */
border-inline-start: 1px;

/* Set the width and style */
border-inline-start: 2px dotted;

/* Set the width, style, and color */
border-inline-start: medium dashed green;

Global Values

border-inline-start also accepts global values like inherit, initial, revert, revert-layer, and unset.

/* Inherit the border from the parent element */
border-inline-start: inherit;

/* Reset the border to its initial value */
border-inline-start: initial;

/* Revert the border to its default value */
border-inline-start: revert;

/* Revert the border considering cascade layers */
border-inline-start: revert-layer;

/* Unset the border */
border-inline-start: unset;

Practical Example

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}

This sets a dashed blue border with a width of 5 pixels on the inline-start side of the .exampleText element.

Values

The border-inline-start property can be specified using one or more of the following values:

border-width: Defines the border width (e.g., 1px, thin).
border-style: Sets the border style (e.g., solid, dashed).
border-color: Determines the border color (e.g., green, #ff0000).

Combining Values

You can combine these values in any order:

/* Set the width only */
border-inline-start: 1px;

/* Set the width and style */
border-inline-start: 2px dotted;

/* Set the width, style, and color */
border-inline-start: medium dashed green;

Global Values

border-inline-start also accepts global values like inherit, initial, revert, revert-layer, and unset.

/* Inherit the border from the parent element */
border-inline-start: inherit;

/* Reset the border to its initial value */
border-inline-start: initial;

/* Revert the border to its default value */
border-inline-start: revert;

/* Revert the border considering cascade layers */
border-inline-start: revert-layer;

/* Unset the border */
border-inline-start: unset;

Practical Example

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}

This sets a dashed blue border with a width of 5 pixels on the inline-start side of the .exampleText element.

Formal Definition

The border-inline-start property is a shorthand that combines the border width, style, and color for the inline-start side of an element.

Initial Value

border-width: medium
border-style: none
border-color: currentColor

Applies To

All elements.

Inherited

No.

Computed Value

border-width: Absolute length or 0 if border-style is none or hidden.
border-style: As specified.
border-color: Computed color.

Animation Type

border-width: By computed value type.
border-style: Discrete.
border-color: By computed value type.

Formal Syntax

border-inline-start: <line-width> || <line-style> || <color>;

Understanding CSS `border-inline-start`

The border-inline-start property in CSS lets you set the border style on the starting side of an element, which can be very useful for different writing modes and directions.

Formal Syntax

border-inline-start =
  <line-width>  [||](/en-US/docs/Web/CSS/Value_definition_syntax#double_bar "Double bar: one or several of the entities must be present, in any order")
  <line-style>  [||](/en-US/docs/Web/CSS/Value_definition_syntax#double_bar "Double bar: one or several of the entities must be present, in any order")
  <color>

<line-width> =
  [<length [0,∞]>](/en-US/docs/Web/CSS/length)  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  thin            [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  medium          [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  thick

<line-style> =
  none    [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  hidden  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  dotted  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  dashed  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  solid   [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  double  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  groove  [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  ridge   [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  inset   [|](/en-US/docs/Web/CSS/Value_definition_syntax#single_bar "Single bar: exactly one of the entities must be present")
  outset

Explanation of Components

<line-width>:
- Sets the width of the border.
- Can use length values (e.g., 1px, 2em) or keywords like thin, medium, thick.
<line-style>:
- Sets the style of the border.
- Common styles include solid, dashed, dotted, double, groove, ridge, inset, outset.
<color>:
- Sets the color of the border.
- Can use color names, hex codes, RGB values, etc.

Combining Properties

You can combine width, style, and color in any order:

/* Set the width only */
border-inline-start: 1px;

/* Set the width and style */
border-inline-start: 2px dotted;

/* Set the width, style, and color */
border-inline-start: medium dashed green;

Global Values

You can also use global CSS values:

/* Inherit the border from the parent element */
border-inline-start: inherit;

/* Reset the border to its initial value */
border-inline-start: initial;

/* Revert the border to its default value */
border-inline-start: revert;

/* Revert the border to its default value, considering the cascade layers */
border-inline-start: revert-layer;

/* Unset the border */
border-inline-start: unset;

Practical Example

Here’s a simple example:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}

In this example, border-inline-start sets a dashed blue border with a width of 5 pixels on the inline-start side of the .exampleText element.

HTML and CSS Example

Here’s a complete example demonstrating border-inline-start:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS | border-inline-start Property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        .container {
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }
        .box {
            background-color: yellow;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
        }
        .example1 {
            border-inline-start: 5px solid blue;
        }
        .example2 {
            writing-mode: vertical-rl;
            border-inline-start: 5px dashed green;
        }
        .example3 {
            direction: rtl;
            border-inline-start: 5px dotted red;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <div class="container">
        <div class="box example1">Left to Right</div>
        <div class="box example2">Vertical RL</div>
        <div class="box example3">Right to Left</div>
    </div>
</body>
</html>

Explanation

Header: <h1> sets the title of the webpage.
Container: .container is a flex container holding three boxes.
Boxes: Each box demonstrates a different writing mode and border style:
- .example1: Solid blue border for left-to-right text.
- .example2: Dashed green border for vertical-right-to-left text.
- .example3: Dotted red border for right-to-left text.

Supported Browsers

Firefox
Opera
Edge

Reference

For more details, check the MDN Web Docs on border-inline-start.

Using border-inline-start helps create dynamic and adaptable web designs, automatically adjusting borders based on the writing mode and text direction.

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-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-inline-color.png

CSS Border-Inline-Color Simplifying Border Styling Learn about the CSS border-inline-color property, which simplifies border styling by setting inline border colors based on writing mode and directionality. Discover available options for this powerful tool.

css_property_cover/css-property-overflow.png

Understanding CSS Overflow for Web Development Learn how to use CSS overflow to manage content that exceeds container boundaries. Explore options like visible, hidden, scroll, and auto to enhance layouts.

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

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-start Simplify Border Management

Introduction

Baseline Widely Available

Overview of border-inline-start

Key Features:

Constituent Properties

Why Use Constituent Properties?

Syntax

Components of the Syntax

Combining Properties

Global Values

Practical Example

Values

Combining Values

Global Values

Practical Example

Formal Definition

Initial Value

Applies To

Inherited

Computed Value

Animation Type

Formal Syntax

Understanding CSS border-inline-start

Formal Syntax

Explanation of Components

Combining Properties

Global Values

Practical Example

HTML and CSS Example

Explanation

Supported Browsers

Reference

Talk with CEO

Overview of `border-inline-start`

Understanding CSS `border-inline-start`