What is CSS-border-bottom and border-right-width property

CSS border-bottom Property

Example

Set the style of the bottom border for different elements.

h1 {
   border-bottom: 5px solid red;
}

h2 {
   border-bottom: 4px dotted blue;
}

div {
    border-bottom: double;
}

Definition and Usage

The border-bottom property is a shorthand property for (in the following order):

  • border-bottom-width
  • border-bottom-style
  • border-bottom-color

If border-bottom -color is omitted, the color applied will be the color of the text.

CSS border-right-width Property

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 red;
                  border-right-width: medium;
                  width:50%;
               }
               p {
                 border-style:dotted;
                 border-right-width:medium;
                 width:70%
               }
            </style>
           </head>
 
            <body>
                <center>
                    <h1 style = "color:red">
                     CodeOne
                     </h1>
                     <h2>border-right-width:initial;</h2>

                     <!-- border-right-width property 
                                             used here -->

                      <h3>CodeOne</h3>

                      <!-- border-right-width property
                                               used here -->
<p>

                      It is a computer science portal for CodeOne.
                      </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 red;
                 border-right-widht: thin;
                 width:50%;
              }
              p {
                 border-style:dotted;
                 border-right-width:thin;
                 width:70%;
             }
          </style>
        </head>
  
        <body>
             <center>
                  <h1 style = "color:red">
                   CodeOne
                   </h1>
                   <h2>border-right-widht:thin;</h2>
                  
                   <!-- border-right-width property
                                           used here -->
                   <h3>CodeOne</h3>

                   <!-- border-right-width property
                                           used here -->
<p>
                    It is a computer science portal for CodeOne.
                   </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 red;
                  border-right-width: thick;
                  width:50%;
              }
              p {
                  border-stylle:dotted;
                  border-right-width:thick;
                  width:70%;
              }
           </style>
         </head>

         <body>
             <center>
                  <h1 style = "color:red">
                   CodeOne
                  </h1>
                  <h2>border-right-width:thick; </h2>
                 
                  <!-- border-right-width Property
                                          used here -->

                  <h3>CodeOne</h3>

                  <!-- border-right-width property
                                          used here -->
<p>

                   It is a computer science portal for CodeOne.
                   </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 red;
                  border-right-width: initial;
                  width:50%;
               }
               p {
                  border-style:dotted;
                  border-right-width:initial;
                  width:70%;
               }
            </style>
          </head>
   
          <body>
              <center>
                   <h1 style = "color:red">
                    CodeOne
                   </h1>
                   <h2>border-right-width:initial;</h2>

                   <!-- border-right-width Property
                                           used here -->

                   <h3>CodeOne</h3>

                   <!-- border-right-width property
                                           used here -->

     <p>
                   It is a computer science portal for CodeOne.  
                   </p>
              
                  </center>
                </body>
              </html>

                              

Output:

Leave a Reply

Your email address will not be published.