CSS - border-block-end-width Property

CSS border-block-end-width property determines the logical block-end border width and is converted into a physical border width depending on the writing mode, directionality, and text orientation of the element.

Syntax

border-block-end-width: medium | thin | thick | length | initial | inherit;

Property Values

Value	Description
medium	It specifies medium width of border. Default value.
thin	It specifies a thin border.
thick	It specifies a thick border.
length	Thickness can be given in the form of value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Block End Width Property

The following examples explain the border-block-end-width property with different values.

Medium Border using Border Block End Width

To set a medium border for the border-block-end-width, we use the medium value. In the following example, medium value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width:medium;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p class="box">
        This shows the border-block-end-width
        property with medium value.
    </p>
</body>

</html>

Thin Border using Border Block End Width

To set a thin border for the border-block-end-width, we use the thin value. In the following example, thin value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width:thin;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p class="box">
        This shows the border-block-end-width
        property with thin value.
    </p>
</body>

</html>

Thick Border using Border Block End Width

To set a thick border for the border-block-end-width as per our choice, we use the thick value. In the following example, thick value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width:thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p class="box">
        This shows the border-block-end-width
        property with thick value.
    </p>
</body>

</html>

Custom Border using Border Block End Width

To set the thickness of the border for the border-block-end-width, we specify the value of thickness as per our choice. In the following example, a 20px thickness value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width:20px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p class="box">
        This shows the border-block-end-width
        property with 20px value.
    </p>
</body>

</html>

Border Block End Width with Writing Mode

The writing mode influences the border-block-end-width property as it determines the direction of the border. Horizontal mode for top and bottom borders and vertical mode for right and left borders. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            border: 1px solid black;
            padding: 8%;
            writing-mode: horizontal-tb;
            border-block-end-width: 15px;
        }

        #vertical {
            border: 1px solid black;
            padding: 8%;
            writing-mode: vertical-rl;
            border-block-end-width: 15px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p id="horizontal">
        This shows the border-block-end-width property
        with 15px value in horizontal mode.
    </p>
    <p id="vertical">
        This shows the border-block-end-width property
        with 15px value in vertical mode.
    </p>
</body>

</html>

Supported Browsers

Property
border-block-end-width	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page