CSS margin-bottom and border-bottom-color

CSS border-bottom-color property is used to specify the color of the bottom border of an element.

First you need to define the border-style or the border-bottom-style properties, because an element must have a border before you will change the color.

The bottom border color can also be defined with the border-color shorthand property.

CSS margin-bottom property

The CSS margin-bottom property is used to specify the amount of margin to be used on the bottom of an element. The

margin can be set in terms of length or percentage.

Syntax:

margin-bottom: <length> | <percentage> | auto

Property values:

Length: This value specifies the length of margin with a fixed value. This value can be positive, negative or zero.

Example:

<!DOCTYPE html>
<html>
<head>
     <title>CSS margin-bottom</title>
     <style>
         div{
            background-color: lightred;
          }
       </style>
     </head>
     <body>
         <h1 style="color: red">CodeOne</h1>

         <!-- margin-bottom for below div
                  is set to 50px -->
         <div style ="margin-bottom: 50px">Line One</div>

         <!-- margin-bottom for below div
               is set to 0px -->
         <div style="margin-bottom: 0px">Line Two</div>

         <div>Line Three</div>
     </body>
     </html>

 

Output:

CSS | border-bottom-color Property

The CSS border-bottom-color property is used to set the color of the bottom border of an element. It is mandatory to

declare the border-style or border-bottom-style property before using the border-bottom-color property always as there

must exist a border first before we change its cololr.

The current value of the element si the default color of this propertys. CSS border-bottom-property is animatable but

cannot be inherited.

Syntax

border-bottom-color:color|transparent|initial|inherit;

Default Value: It s default value is initial.

Property Values: The border-bottom-color property values are listed below:

  • Color: It specifies the color of the bottom border.
  • transparent: It specifies that the border color should be transparent.
  • initial: It is used to set its default value.
  • inherit: It is used when an element inherits this property from its parent element.

Example

Html

<!DOCTYPE html>
<html>
<head>
     <title>
          CSS | border-bottom-color property
     </title>
      <style>
           h1 {
              border-style: solid;
              border-bottom-color: red;
            }

            div {
                border-style: solid;
                border-bottom-color: red;
             }
          </style>
        </head>

         <body>
              <h1>CodeOne</h1>
              <div>I am a div with red bottom border.</div>
         </body>
         </html>

Output:

Leave a Reply

Your email address will not be published.