CSS borderrightstyle Property (original) (raw)

CSS border-right-style Property

Last Updated : 11 May, 2026

The border-right-style property in CSS is used to specify the style of the right border of an element. It controls how the right border appears, such as solid, dotted, or dashed.

• It supports values like solid, dashed, dotted, double, groove, etc.
• The border is visible only when a valid style (not none or hidden) is applied.
• It is typically used along with border-right-width and border-right-color for full border styling.

Syntax:

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

**Default Value: none

**Property Values:

• none: It is the default value and it makes the width of right border to zero. Hence, it is not visible.
• hidden : It is used to make right border invisible, like none, except in case of border conflict resolution of table elements.
• dotted : It is used to make the right border with a series of dots.
• dashed : It makes the right border with a series of short line segments.
• solid : It is used to make the right border with a single solid line segment.
• double : This property makes the right border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them.
• groove : It makes the right border with a grooved line segment, which makes us feel that it is going inside.
• inset : It makes the right border with an embedded line segment, which makes us feel that it is fixed deeply on the screen.
• outset : It is opposite of inset. It makes the right border with a line segment, which appears to be coming out.
• inherit : It makes the right-border-style property to be inherited from its parent element.

Example: Here, we are using the border-right-style: none property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: none;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: hidden property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: hidden;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: dotted; property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: dotted;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: dashed property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: dashed;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: solid property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: solid;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: double property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property for border-right-style */
        border-right-style: double;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: groove; property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        border: 10px;
        border-style: solid;

        /* CSS Property for border-right-style */
        border-right-style: groove;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: inset; property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        border: 10px;
        border-style: solid;

        /* CSS Property for border-right-style */
        border-right-style: inset;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: outset property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    h1 {
        border: 10px;
        border-style: solid;

        /* CSS Property for border-right-style */
        border-right-style: outset;
    }
</style>

GeeksForGeeks

`

Output:

Example: Here, we are using border-right-style: inherit; property.

html `

<!-- Internal CSS Style Sheet -->
<style>
    body {
        border-right-style: dashed;
    }

    h1 {
        color: green;
        text-align: center;
        border: 5px solid black;

        /* CSS Property | border-right-style */
        border-right-style: inherit;
    }
</style>

GeeksForGeeks

`

Output: