CSS border-block-end-style Property

CSS border-block-width Property

Last Updated : 17 Jun, 2024

The border-block-width property sets the width of an element’s borders in the block direction. It defines the thickness of the block-start and block-end borders, adapting to the writing mode. This property ensures consistent border styling for elements, regardless of text flow direction.

Syntax:

border-block-width: width;

Property values:

width: This property holds the width of the border.

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

Example 1: In this example we use border-block-width to set the width of block borders, contrasting with dashed inline borders, demonstrating its effect within a styled div element.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS border-block-width Property</title>
    <style>
        h1 {
            color: green;
        }

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

        .one {
            border: 5px dashed cyan;
            border-block-width: 2px;
            background-color: purple;
        }
    </style>
</head>

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

</html>

Output:

Example 2: In this example we use border-block-width to set a solid cyan border with a block width of 2px, within a purple background div.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS border-block-width Property</title>
    <style>
        h1 {
            color: green;
        }

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

        .one {
            border: 5px solid cyan;
            border-block-width: 2px;
            background-color: purple;
        }
    </style>
</head>

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

</html>

Output:

Supported Browsers:

The browsers supported by border-block-width property are listed below:

CSS border-block-end-style Property

S

skyridetim

Improve

Article Tags :

Similar Reads

CSS | border-block-end-width Property

The border-block-end-width property in CSS is used to define the individual logical block-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-block-end-width: border-width; Property values:

CSS | border-block-start-width Property

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

CSS | border-block Property

The border-block property in CSS allows you to set the border for the logical block-start and block-end of an element in a single declaration. This property is useful for applying borders to elements based on their writing mode, making it adaptable for different text orientations. Syntax:border-bloc

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-block-style Property

The border-block-style property in CSS is used to set the individual logical block border-style property values in a single place in the style sheet. It sets the border style top, and bottom of the defining border element. Syntax: border-block-style: style; Property values: style: This property hold

CSS | border-block-start Property

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

CSS | border-block-end Property

The border-block-end property in CSS is used to define the individual logical block-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-block-end: border-width|border-style|border-color; Property values

CSS border-top-width Property

The border-top-width property in CSS is used to set a specific width to the top border of an element. The border-top-style or border-style property is used for the element before using the border-top-width property. Default Value: medium Syntax: border-top-width: length|thin|medium|thick|initial|inh

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-block-end-style Property

The border-block-end-style property in CSS is used to set the style of the logical block-end border of an element. This property controls the appearance of the border at the block-end (bottom side in horizontal writing modes) of an element. Syntax: border-block-end-style: border-style;Property value