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:
