CSS | border-inline Property

CSS | border-inline-end Property

Last Updated : 26 Mar, 2020

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 values:

border-width: This property value holds the width of the border-inline-end property.
border-style: This property holds the border style that can be dashed, solid, etc.
border-color: This property holds the color of the border.

Below examples illustrate the border-inline-end property in the CSS: Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS | border-inline-end Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border-inline-end: 5px solid yellow;
            background-color: purple;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-inline-end 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-end Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border-inline-end: medium dashed yellow;
            background-color: purple;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-inline-end Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>
 
</html>

Output:

Supported Browsers: The browser supported by border-inline-end property are listed below:

Firefox
Opera
Edge

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

CSS | border-inline Property

S

skyridetim

Improve

Article Tags :

Similar Reads

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

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-end-color Property

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

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-inline-color Property

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

CSS border-inline-width Property

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

CSS border-left Property

The border-left property in CSS is used to set all bottom left properties in one line. It is used to set the width, style, and color of the left border.Syntax: border-left: border-width border-style border-color|initial|inherit; border-left is a shorthand to set the below property values.Property Va

CSS border-image Property

The border-image property in CSS is used to set the border of an element.Â Syntax:border-image: source slice width outset repeat|initial|inherit;The border-image property is the combination of many properties which are listed below:border-image-sourceborder-image-sliceborder-image-widthborder-image-o

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