Some Border-bottom property in below which is usually uses in CSS-
- border-bottom-style
- border-bottom-width
- border-bottom-color
- border-bottom
border-bottom-style–
- none – This is default which specifies no border.
- hidden – This is very similar to none value, except in border conflict resolution for table elements
- solid – It specifies a solid border
- dotted – It specifies a dotted border
- double – It specifies a double border
- dashed – It specifies a dashed border
- groove – It specifies a 3D grooved border.
- ridge – It specifies a 3D ridged border.
- inset – It specifies a 3D inset border.
- outset – It specifies a 3D outset border
border-bottom-width–
- medium – This is default value which specifies a medium bottom border.
- thin – It specifies a thin bottom border
- thick – It specifies a thick bottom border
- length – We can define bottom border length in the form of % px etc.
border-bottom-color–
- color value
- transparent
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 10px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>
border-bottom–
Syntax:-
selector{ border-bottom: border-bottom-width border-bottom-style border-bottom-color;}
Ex:-
h2{ border-bottom: 10px solid #1c87c9;}
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>
Latest posts by rajeshkumar (see all)