Skip to content
Related Articles

Related Articles

Improve Article
CSS | border-right-width Property
  • Last Updated : 07 Aug, 2019

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.

  • Syntax:
    border-right-width: medium;
  • Example:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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 :