Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - border-style


previous next AddThis Social Bookmark Button


Advertisements

Description:

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:

<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 Printer Friendly

Advertisements


  

Advertisements