What is border-right and border-bottom-width Property

CSS: border-right property

The border-right Property is a shorthand property used for all the three properties that are given below-

  • border-right-width
  • border-right-style(if required)
  • border-right-color

Description

The CSS border-right property defines the width, line style, and color of the right border of a box. It is a shorthand property for setting the border-right-width, border-right-style, and border-right-color properties.

Syntax:

border-right: border-width border-style border-color

Example:

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-right Property
     </title>
      <style>
         h1 {
            border-right:5px solid red;
          }
  
          h2 {
             border-right: 4px dotted blue;
          }

          div {
              border-right: double;
           }
         </style>
        </head>
       
        <body>
             
            <h1>A heading with a solid red right border</h1>
               
            <h2>A heading with a dotted blue right border</h2>

            <div>A div element with a double right border.</div>

       </body>
       
       </html>


initial: It sets the property to its default value.

Syntax:

border-right:initial;

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: red;
}
 
h3 {
   border-right: initial;
   width:20%;
   }
  
  div {
    border-right: initial;
    width:40%;
    }
    </style>
    </head>
    <body>
    <center>
    <h1>CodeOne</h1>
    <h2>CSS Border-right Property</h2>
    <h3>CodeOne</h3>

    <div>It is a computer science portal for CodeOne.</div>

    </body>
    </html>

    

Output:

CSS border-bottom-width Property

The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element. The border-bottom-style or border-style property is used for the element before using the border-bottom-width property.

Syntax:

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

Property Values: The border-width property values are listed below:

  • thin: It is used to set the thin border of the bottom.
  • medium: It is used to set medium sized bottom border. It is the default value.
  • thick: It is used to set thick bottom border.
  • length: It is used to set the width of the border. It does not takes negative value.

Example:

<!DOCTYPE html>
<html>
     <head>
          <title>
              border-bottom-width property
          </title>
   
          <style>
              #thin {
                 border-color: red;
                 border-bottom-style: solid;
                 border-bottom-width: thin;
              }
              #medium {
                  border-color: red;
                  border-bottom-style: solid;
                  border-bottom-width: medium;
              }
              #thick {
                  border-color: red;
                  border-bottom-style: solid;
                  border-bottom-width: thick;
              }
              #length {
                  border-color: red;
                  border-bottom-style: solid;
                  border-bottom-width: 20px;
              }
           </style>
         </head>

         <body style = "text-align:center">
     
             <h1 style = "color:red">CodeOne</h1>

             <h3>border-bottom-width property</h3>

             <div id="thin">
                 border-bottom-width: thin;
             </div><br><br>

             <div id="medium">
                 border-bottom-width: medium;
             </div><br><br>

             <div id="thick">
                 border-bottom-width: thick;
             </div><br><br>

             <div id="length">
                 border-bottom-width: length;
             </div>
           </body>
          </html>

Output:

Leave a Reply

Your email address will not be published.