CSS Border bottom property Web designing blog
Border bottom property
1. Border-bottom-style
The Border bottom style property set a style of element bottom Border.
Syntax
Rear: border-bottom-style: none hidden | dotted | dashed | solid | double groove ridge | inset | outset | initial | inherit;
Border-bottom-style Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{border-bottom-style: groove;
border-bottom-color: coral;
border-bottom-width: 7px;
}
div { border-style: solid;
border-bottom-style: groove;
border-bottom-color: coral;
border-bottom-width: 7px; }
</style>
</head>
<body>
<h1>A heading with a groove bottom border</h1>
<div> div element with groove bottom border.</div>
</body>
</html>
Border-bottom-style output
2. Border-bottom-color
The border-bottom-color property set the color of an element bottom border. Always declare to the border-style or the border-bottom-style property before the border- bottom-color property. An element must have a border before you can change the color.
Border-bottom-color Example
<! Doctype html>
<html>
<head>
<style>
h1 {border-bottom-style: solid;
border-bottom-color: pink;
}
h2 {
border-bottom-style: solid;
border-bottom-color: rgb(20, 176,76);}
h3 { border-bottom-style: solid;
border-bottom-color: hsla(89, 45%, 10%,0.5);}
h4 {
border-style: solid;
border-bottom-color: #92a8d1;}
</style>
</head>
<body>
<h1>A head with a colored bottom border</h1>
<h2>A head with a colored bottom border</h2>
<h3>A head with a colored bottom border</h3>
<h4>A head with a colored bottom border</h4>
</body>
</html>
Border-bottom-color output
3. border-top-right-radius Property:
Syntax:
border-top-right-radius Example
border-top-right-radius Output
Post a Comment