CSS borderrightwidth Property (original) (raw)

CSS border-right-width Property

Last Updated : 15 May, 2026

The border-right-width property in CSS is used to define the width (thickness) of the right border of an element. It controls how thick or thin the right border appears.

It accepts values like thin, medium, thick, or specific units such as px, em, etc.
The border is visible only if a border style is specified (e.g., solid, dashed).
It is commonly used with border-right-style and border-right-color for complete border styling.

Syntax:

Property Values:

Value	Description
medium	The default value sets a medium-sized right border.
thin	Sets a thin right border.
thick	Sets a thick right border.
length	Sets the thickness of the right border using specific length units (e.g., px, em, rem).
initial	Sets the right border width to its default value as defined by the browser.

1. border-right-width: medium

The border-right-width: medium; property sets the right border of an element to a medium thickness by default.

Example: Here, we are using border-right-width: medium; property.

html `

CSS border-right-width Property

<style>
    h3 {
        border: solid green;
        border-right-width: medium;
        width: 50%;
    }

    p {
        border-style: dotted;
        border-right-width: medium;
        width: 70%;
    }
</style>

GeeksForGeeks

border-right-width:medium;

    <!-- border-right-width property used here -->
    <h3>GeeksForGeeks</h3>

    <!-- border-right-width property used here -->
    <p>
        It is a computer science portal for geeks.
    </p>
</center>

2. border-right-width: thin

The border-right-width: thin; property sets the right border of an element to a thin thickness.

Example: Here, we are using border-right-width: thin; property.

html `

CSS border-right-width Property

<style>
    h3 {
        border: solid green;
        border-right-width: thin;
        width: 50%;
    }

    p {
        border-style: dotted;
        border-right-width: thin;
        width: 70%;
    }
</style>

GeeksForGeeks

border-right-width:thin;

    <!-- border-right-width property used here -->
    <h3>GeeksForGeeks</h3>

    <!-- border-right-width property used here -->
    <p>
        It is a computer science portal for geeks.
    </p>
</center>>

3. border-right-width: thick

The border-right-width: thick; property sets the right border of an element to a thick thickness.

Example: Here, we are using the border-right-width: thick; property.

html `

CSS border-right-width Property

<style>
    h3 {
        border: solid green;
        border-right-width: thick;
        width: 50%;
    }

    p {
        border-style: dotted;
        border-right-width: thick;
        width: 70%;
    }
</style>

GeeksForGeeks

border-right-width:thick;

GeeksForGeeks

It is a computer science portal for geeks.

4. border-right-width: length

The length property in CSS specifies the width of the border using specific measurements like pixels (px), centimeters (cm), or other length units, customizing the right-border width accordingly.

Example: Here, we are using border-right-width: length; property.

html `

CSS border-right-width Property

<style>
    h3 {
        border: solid green;
        border-right-width: 10px;
        width: 50%;
    }

    p {
        border-style: dotted;
        border-right-width: 5px;
        width: 70%;
    }
</style>

GeeksForGeeks

border-right-width:length;

GeeksForGeeks

    <!-- border-right-width property used here -->
    <p>
        It is a computer science portal for geeks.
    </p>
</center>

5. border-right-width: initial

The initial property in CSS sets a CSS property to its default value, specifically initializing the right-border width to its default setting.

Example: Here, we are using border-right-width: initial; property.

html `

CSS border-right-width Property

<style>
    h3 {
        border: solid green;
        border-right-width: initial;
        width: 50%;
    }

    p {
        border-style: dotted;
        border-right-width: initial;
        width: 70%;
    }
</style>

GeeksForGeeks

border-right-width:initial;

    <!-- border-right-width property  used here -->
    <h3>GeeksForGeeks</h3>

    <!-- border-right-width property used here -->
    <p>
        It is a computer science portal for geeks.
    </p>
</center>