CSS - border-style Property
The border-style property allows you to select one of the following styles of border −
none − No border. (Equivalent of border-width:0;)
solid − Border is a single solid line.
dotted − Border is a series of dots.
dashed − Border is a series of short lines.
double − Border is two solid lines.
groove − Border looks as though it is carved into the page.
ridge − Border looks the opposite of groove.
inset − Border makes the box look like it is embedded in the page.
outset − Border makes the box look like it is coming out of the canvas.
hidden − Same as none, except in terms of border-conflict resolution for table elements.
You can individually change the style of the bottom, left, top, and right borders of an element using following properties −
border-bottom-style − changes the style of bottom border.
border-top-style − changes the style of top border.
border-left-style − changes the style of left border.
border-right-style − changes the style of right border.
Possible Values
Any of the values defined above.
Applies to
All the HTML elements.
DOM Syntax
object.style.borderStyle = "Any of the values defined above";
Example
Following is the example to show all these border styles −
<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> This is a border with none width. </p> <p style = "border-width:4px; border-style:solid;"> This is a solid border. </p> <p style = "border-width:4px; border-style:dashed;"> This is a dashed border. </p> <p style = "border-width:4px; border-style:double;"> This is a double border. </p> <p style = "border-width:4px; border-style:groove;"> This is a groove border. </p> <p style = "border-width:4px; border-style:ridge"> This is a ridge border. </p> <p style = "border-width:4px; border-style:inset;"> This is a inset border. </p> <p style = "border-width:4px; border-style:outset;"> This is a outset border. </p> <p style = "border-width:4px; border-style:hidden;"> This is a hidden border. </p> <p style = "border-width:4px; border-top-style:solid; border-bottom-style:dashed; border-left-style:groove; border-right-style:double;"> Four different styles of borders on all the sides of the element. </p> </body> </html>
Border Style - Shorthand
The border-style property can have four values, three values, two values or one value as demonstrated in the following example:
<html> <head> <style type = "text/css"> p.example1 { border:4px solid; border-style:dashed double ridge groove; } p.example2 { border:4px solid; border-style:dashed double ridge; } p.example3 { border:4px solid; border-style:dashed double ; } p.example4 { border:4px solid; border-style:dashed; } </style> </head> <body> <p class = "example1"> <i>border-style</i> with four different values. </p> <p class = "example2"> <i>border-style</i> with three different values. </p> <p class = "example3"> <i>border-style</i> with two different values. </p> <p class = "example4"> <i>border-style</i> with one value. </p> </body> </html>
To Continue Learning Please Login
Login with Google