Copyright © tutorialspoint.com
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.
Any of the values defined above.
All the HTML elements.
object.style.borderStyle="Any of the values defined above"; |
Following is the example to show all these border styles:
<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 dahsed 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 aridge 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;"> This is a a border with four different styles. </p> |
This will produce following result:
This is a border with none width. This is a solid border. This is a dahsed border. This is a double border. This is a groove border. This is aridge border. This is a inset border. This is a outset border. This is a a border with four different styles. |
To Become more comfortable - Do Online Practice
Copyright © tutorialspoint.com