CODESCRACKER

CSS border-bottom-style: Set or Change the Style of the Bottom Border

The CSS border-bottom-style property is used when we need to set the style of the bottom border of an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-bottom-style: solid;}
      p.two {border-bottom-style: double;}
      p.three {border-bottom-style: groove;}
      p.four {border-bottom-style: dotted;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>
   <p class="four">This is para four.</p>

</body>
</html>
Output

This is para one.

This is para two.

This is para three.

This is para four.

In the above example, here are some brief descriptions of CSS code:

The HTML structure consists of four paragraphs with classes of "one," "two," "three," and "four." The CSS code targets each paragraph class and sets its border-bottom-style property to a different value: solid, double, groove, or dotted.

This results in each paragraph having a different style of border on its bottom edge. The first paragraph has a solid border, the second has a double border, the third has a groove border, and the fourth has a dotted border. By targeting specific classes, the CSS allows for different styles to be applied to different paragraphs, giving each one its own unique appearance.

CSS border-bottom-style syntax

The syntax of border-bottom-style in CSS is:

border-bottom-style: value;

Note: All values that can be used to define the style of the bottom border are described in a separate post.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!