Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | border-right-width Property

  • Last Updated : 22 Aug, 2021

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
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :