CSS: border-top-style property
This CSS tutorial explains how to use the CSS property called border-top-style with syntax and examples.
Description
The CSS border-top-style property defines the line style of the top border of a box.
Syntax
The syntax for the border-top-style CSS property is:
border-top-style: value;
Parameters or Arguments
- value
The line style to use for the top border. It can be one of the following:
Value Description none No border (This is the default)
div { border-top-style: none; }solid Single, straight, solid line
div { border-top-style: solid; }dotted Series of dots
div { border-top-style: dotted; }dashed Series of short dashes
div { border-top-style: dashed; }double Two straight lines that total the pixel amount defined by border-top-width
div { border-top-style: double; }groove Carved effect
div { border-top-style: groove; }ridge 3D appearance where border looks like it is "coming out" (opposite of groove)
div { border-top-style: ridge; }inset Embedded appearance
div { border-top-style: inset; }outset Embossed appearance (opposite of inset)
div { border-top-style: outset; }hidden Border is hidden
div { border-top-style: hidden; }inherit Element will inherit the border-top-style from its parent element
div { border-top-style: inherit; }
Note
- Since the default value for CSS border-top-style is none, you must set a CSS border-top-style value for your top border to appear.
- See also the border-top-color, border-top-width, and border-top properties.
Browser Compatibility
The CSS border-top-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-top-style property below, exploring examples of how to use this property in CSS.
Let's look at an example where we set a solid top border.
div { border-top-style: solid; }
In this CSS border-top-style example, we have set the style of the top border to solid.
There are other styles to choose from. Let's try setting our top border to double.
div { border-top-style: double; border-top-color: blue; }
In this border-top-style example, we have set the top border style to a double line that is blues.
Advertisements