Open In App

CSS border-right-width Property

Improve
Improve
Like Article
Like
Save
Share
Report

The border-right-width property in CSS is used to set the width of right-border of an element. It is mandatory to declare the border-style or the border-right-style property before the border-right-width property.

Syntax:  

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

Property Values: 

  • medium: It is the default value. It is used to specify a medium size of right-border. 
  • thin: This property is used to set the width of right border as thin. 
  • thick: This property is used to specify a thick right-border of an element.
  • length: This property is used to set the thickness of the right-border. 
  • initial: It is used to set border-right-width property to its default value. 

Example: In this example, we are using border-right-width: medium; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right-width Property
    </title>
    <style>
        h3 {
            border: solid green;
            border-right-width: medium;
            width: 50%;
        }
 
        p {
            border-style: dotted;
            border-right-width: medium;
            width: 70%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>border-right-width:initial;</h2>
 
        <!-- 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>
</body>
</html>


Output: 

Example:  In this example, we are using border-right-width: thin; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right-width Property
    </title>
    <style>
        h3 {
            border: solid green;
            border-right-width: thin;
            width: 50%;
        }
 
        p {
            border-style: dotted;
            border-right-width: thin;
            width: 70%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>border-right-width:initial;</h2>
 
        <!-- 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>>
</body>
</html>


Output: 

Example:  In this example, we are using the border-right-width: thick; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right-width Property
    </title>
    <style>
        h3 {
            border: solid green;
            border-right-width: thick;
            width: 50%;
        }
 
        p {
            border-style: dotted;
            border-right-width: thick;
            width: 70%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>border-right-width:initial;</h2>
        <!-- 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>
</body>
</html>


Output: 

Example:  In this example, we are using border-right-width: length; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right-width Property
    </title>
    <style>
        h3 {
            border: solid green;
            border-right-width: 10px;
            width: 50%;
        }
 
        p {
            border-style: dotted;
            border-right-width: 5px;
            width: 70%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>border-right-width:initial;</h2>
        <!-- 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>
</body>
</html>


Output: 

Example:  In this example, we are using border-right-width: initial; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right-width Property
    </title>
    <style>
        h3 {
            border: solid green;
            border-right-width: initial;
            width: 50%;
        }
 
        p {
            border-style: dotted;
            border-right-width: initial;
            width: 70%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>border-right-width:initial;</h2>
 
        <!-- 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>
</body>
</html>


Output: 

Supported Browsers: The browser supported by border-right-width property are listed below:  

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads