CSS: border-bottom-style property
This CSS tutorial explains how to use the CSS property called border-bottom-style with syntax and examples.
Description
The CSS border-bottom-style property defines the line style of the bottom border of a box.
Syntax
The syntax for the border-bottom-style CSS property is:
border-bottom-style: value;
Parameters or Arguments
- value
The line style to use for the bottom border. It can be one of the following:
Value Description none No border (This is the default)
div { border-bottom-style: none; }solid Single, straight, solid line
div { border-bottom-style: solid; }dotted Series of dots
div { border-bottom-style: dotted; }dashed Series of short dashes
div { border-bottom-style: dashed; }double Two straight lines that total the pixel amount defined by border-bottom-width
div { border-bottom-style: double; }groove Carved effect
div { border-bottom-style: groove; }ridge 3D appearance where border looks like it is "coming out" (opposite of groove)
div { border-bottom-style: ridge; }inset Embedded appearance
div { border-bottom-style: inset; }outset Embossed appearance (opposite of inset)
div { border-bottom-style: outset; }hidden Border is hidden
div { border-bottom-style: hidden; }inherit Element will inherit the border-bottom-style from its parent element
div { border-bottom-style: inherit; }
Note
- Since the default value for CSS border-bottom-style is none, you must set a CSS border-bottom-style value for your bottom border to appear.
- See also the border-bottom-color, border-bottom-width, and border-bottom properties.
Browser Compatibility
The CSS border-bottom-style property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-bottom-style property below, exploring examples of how to use this property in CSS.
Let's look at an example where we set a solid bottom border.
div { border-bottom-style: solid; }
In this CSS border-bottom-style example, we have set the style of the bottom border to solid.
There are other styles to choose from. Let's try setting our bottom border to dashed.
div { border-bottom-style: dashed; border-top-style: double; }
In this border-bottom-style example, we have set the bottom border style to a dashed line and the top border style to a double line. As you can see, the sides of the border can be completely different which can add a unique visual effect to your web page.
Advertisements