CSS - border-block-end-style Property

Previous
Quiz
Next

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

Syntax

border-block-end-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value Description
none It specifies no border. Default value.
hidden It is similar to none, except in border conflict resolution for table elements.
dotted It specifies a dotted border.
dashed It specifies a dashed border.
solid It specifies a solid border.
double It specifies a double border.
groove It specifies a 3D grooved border. Effect depends on the border-color value.
ridge It specifies a 3D ridged border. Effect depends on the border-color value.
inset It specifies a 3D inset border. Effect depends on the border-color value.
outset It specifies a 3D outset border. Effect depends on the border-color value.
inherit This inherits the property from the parent element.

Examples of CSS Border Block End Style Property

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

Setting no Border to Border Block End Style

To avoid having a border at the border block end, we use the none value. In the following example, none value has been used with the border-block-end-style property.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Hidden Border Block End Style

To set a hidden border at the block end, we use the hidden value. This makes the border occupy space but remain invisible. The example below shows this effect with a red indication line highlighting the hidden border.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            width: 300px;
            padding: 10%;
            border: 2px solid black;
            position: relative;
            margin-bottom: 20px;
        }

        .none {
            border-block-end-width: 5px;
            border-block-end-style: none;
            border-block-end-color: transparent;
        }

        .hidden {
            border-block-end-width: 5px;
            border-block-end-style: hidden;
            border-block-end-color: transparent;
        }

        .indicator {
            background-color: red;
            height: 5px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .show-indicator .indicator {
            display: block;
        }
    </style>
</head>

<body>
    <h2>CSS border-block-end-style property</h2>
    <div class="container none">
        Border Block End Style: none
    </div>
    <div class="container hidden show-indicator">
        Border Block End Style: hidden
        <div class="indicator"></div>
    </div>
</body>

</html>

Dotted Border Block End Style

To have a dotted border at the border block end, we use the dotted value. In the following example, dotted value has been used with the border-block-end-style property.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Dashed Border Block End Style

To have a dashed border at the border block end, we use the dashed value. In the following example, dashed value has been used with the border-block-end-style property.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Solid Border Block End Style

To have a solid border at the border block end, we use the solid value. In the following example, solid value has been used with the border-block-end-style property.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Double Border to Border Block End Style

To have a double border at the border block end, we use the double value. In the following example, double value has been used with the border-block-end-style property.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Groove Border Block End Style

To have a 3D grooved border at the border block end, we use the groove value. This effect depends on the border-color. In the following example, groove value has been used with the border-block-end-style property with red border color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 15px solid red;
            padding: 10%;
            border-block-end-style: groove;
        }
    </style>
</head>

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

</html>

Ridge Border Block End Style

To have a 3D ridged border at the border block end, we use the ridge value. This effect depends on the border-color. In the following example, ridge value has been used with the border-block-end-style property with yellow border color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 15px solid yellow;
            padding: 10%;
            border-block-end-style: ridge;
        }
    </style>
</head>

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

</html>

Inset Border Block End Style

To have a 3D inset border at the border block end, we use the inset value. This effect depends on the border-color. In the following example, inset value has been used with the border-block-end-style property with orange border color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 15px solid orange;
            padding: 10%;
            border-block-end-style: inset;
        }
    </style>
</head>

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

</html>

Outset Border Block End Style

To have a 3D outset border at the border block end, we use the outset value. This effect depends on the border-color. In the following example, out value has been used with the border-block-end-style property with green border color.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
border-block-end-style 69.0 79.0 41.0 12.1 56.0
css_reference.htm
Print Page
Previous
Next
Advertisements