CSS border-image-width Property

CSS border-inline-width Property

Last Updated : 17 Jun, 2024

The border-inline-width property sets the width of an element’s borders in the inline direction. It specifies the thickness of the inline-start and inline-end borders, adapting to the text direction. This property ensures consistent border styling in both left-to-right and right-to-left layouts.

Syntax:

border-inline-width: width;

Property values:

width: This property holds the width of the border.

The below examples illustrate the border-inline-width property in the CSS:

Example 1: In this example, we use border-inline-width to set the width of inline borders while retaining the overall layout with dashed borders and background colors for clarity.

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>Geeksforgeeks</h1>
        <b>CSS border-inline-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>

</html>

Output:

Example 2:

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: 2px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-inline-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>

</html>

Output:

Supported Browsers:

The browser supported by border-inline-width property are listed below:

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width

CSS border-image-width Property

S

skyridetim

Improve

Article Tags :

Similar Reads

CSS | border-inline-end-width Property

The border-inline-end-width property in CSS is used to define the individual logical inline-end border property values in a single place in the style sheet. This property sets the border-width at the bottom of the defining element border. Syntax: border-inline-end-width: border-width; Property value

CSS | border-inline-start-width Property

The border-inline-start-width property in CSS is used to define the individual logical inline-end border property values in a single place in the style sheet. This property sets the border-width at the left of the defining element border. Syntax: border-inline-start-width: border-width; Property val

CSS | border-inline Property

The border-inline property in CSS is used to set the individual logical block inline border property values in a single place in the style sheet. It sets the inline border-top(left) and bottom(right) of the defining element. Syntax: border-inline: border-width| border-style| border-color; Property v

CSS border-left-width Property

The border-left-width property in CSS specifies the width of an element's left border. You can set this width using various units like pixels, ems, or percentages. This property allows for precise control over the left border's thickness, contributing to the element's overall design and layout. Synt

CSS border-image-width Property

The CSS border-image-width Property is used to set the width of the border image. It can be set by providing multiple values. If only one value is provided, it is applied to all four sides.When two values are specified, The first value is applied to 'the top and bottom', and The second value is appl

CSS | border-inline-style Property

The border-inline-style property is an inbuilt property in CSS which is used to set the individual logical block inline-border-style property values in a single place in the style sheet. It sets the inline border-style top(left), and bottom(right) of the defining border element. Syntax: border-inlin

CSS | border-inline-start Property

The border-inline-start property in CSS is used to define the individual logical inline-end border property values in a single place in the style sheet. This property place the border at the left of the defining element. Syntax: border-inline-start: border-width| border-style| border-color; Property

CSS border-width Property

The border-width property in CSS sets the width of an elementâ€™s border. You can specify a single width for all four sides or define different widths for each side (top, right, bottom, and left). This property is crucial for creating visually appealing borders and enhancing the layout of your web pag

CSS | border-inline-end Property

The border-inline-end property in CSS is used to define the individual logical inline-end border property values in a single place in the style sheet. This property place the border at the bottom of the defining element. Syntax: border-inline-end: border-width|border-style|border-color; Property val

CSS | border-inline-end-style Property

The border-inline-end-style property in CSS is used to define the individual logical inline-end border property values in a single place in the style sheet. This property sets the border-style at the bottom of the defining element border. Syntax: border-inline-end-style: border-style; Property value