Skip to content
Related Articles

Related Articles

CSS | border-right-width Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
View Discussion
Improve Article
Save Article

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.

Default Value: 

  • medium

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. 

Syntax: 

border-right-width: medium;

Example: 

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: 

thin: This property is used to set the width of right border as thin. 

Syntax: 

border-right-width: thin;

Example: 

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: 

thick: This property is used to specify a thick right-border of an element.

Syntax: 

border-right-width: thick;

Example: 

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: 

length: This property is used to set the thickness of the right-border. 

Syntax: 

border-right-width: length;

Example: 

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: 

initial: It is used to set border-right-width property to its default value. 

Syntax: 

border-right-width: initial;

Example: 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!