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.
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
.
Here are some examples of how to use the border-bottom-style property:
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.
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.
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.
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.
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.
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.
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.
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.