Copyright © tutorialspoint.com

CSS - border-style

previous next


Advertisements

Description:

The border-style property allows you to select one of the following styles of border:

You can individually change the style of the bottom, left, top, and right borders of an element using following properties:

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:

<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 hidden border.

This is a a border with four different styles.

To Become more comfortable - Do Online Practice


previous next

Copyright © tutorialspoint.com