CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-bottom-style

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS is used to style web pages and applications, and it provides a wide range of properties to customize the appearance of elements on a page. One of these properties is the border-bottom-style property, which is used to set the style of the bottom border of an element.

Brief Explanation of Border-Bottom-Style

The border-bottom-style property is used to set the style of the bottom border of an element. The property can take one of the following values:

  • none: No border is displayed.
  • hidden: The border is hidden, but still takes up space.
  • dotted: The border is a series of dots.
  • dashed: The border is a series of short dashes.
  • solid: The border is a solid line.
  • double: The border is two parallel solid lines.
  • groove: The border looks like it is carved into the page.
  • ridge: The border looks like it is coming out of the page.
  • inset: The border looks like it is pressed into the page.
  • outset: The border looks like it is coming out of the page.

The default value of the border-bottom-style property is none.

Code Examples

Here are some examples of how to use the border-bottom-style property:

Example 1: Solid Border

In this example, we set the border-bottom-style property to solid to create a solid border:

  <p style="border-bottom-style: solid;">This is a paragraph with a solid bottom border.</p>

This is a paragraph with a solid bottom border.

Example 2: Dotted Border

In this example, we set the border-bottom-style property to dotted to create a dotted border:

  <p style="border-bottom-style: dotted;">This is a paragraph with a dotted bottom border.</p>

This is a paragraph with a dotted bottom border.

Example 3: Double Border

In this example, we set the border-bottom-style property to double to create a double border:

  <p style="border-bottom-style: double;">This is a paragraph with a double bottom border.</p>

This is a paragraph with a double bottom border.

Example 4: Groove Border

In this example, we set the border-bottom-style property to groove to create a groove border:

  <p style="border-bottom-style: groove;">This is a paragraph with a groove bottom border.</p>

This is a paragraph with a groove bottom border.

Example 5: Ridge Border

In this example, we set the border-bottom-style property to ridge to create a ridge border:

  <p style="border-bottom-style: ridge;">This is a paragraph with a ridge bottom border.</p>

This is a paragraph with a ridge bottom border.

Example 6: Inset Border

In this example, we set the border-bottom-style property to inset to create an inset border:

  <p style="border-bottom-style: inset;">This is a paragraph with an inset bottom border.</p>

This is a paragraph with an inset bottom border.

Example 7: Outset Border

In this example, we set the border-bottom-style property to outset to create an outset border:

  <p style="border-bottom-style: outset;">This is a paragraph with an outset bottom border.</p>

This is a paragraph with an outset bottom border.

Conclusion

The border-bottom-style property is a useful CSS property that allows you to customize the style of the bottom border of an element. By using the different values of this property, you can create a wide range of border styles to suit your needs.

References

Activity