CSS - border-style



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 −

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>
Advertisements