border-style - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-style

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-style

Description

The border-style CSS property is a shorthand property for setting the individual border style properties:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

The following table summarizes the border-style Property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


border-style:     [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is specified, it sets all four border sides.
  • If two values are specified, the first value sets the top and bottom border, while the second value sets the right and left sides border.
  • If three values are specified, the first value sets the top border, the second value sets the right and left border, and the third value applies to the bottom border.
  • If four values are specified, each value sets the border individually in the order of top, right, bottom, and left.

Property Values

The following table describes the values of border-style Property.

Value Description
noneNo border will be displayed.
hidden Same as 'none'
dotted a series of dots.
dashed a series of short line segments i.e. dashes.
solid a single solid line.
double a two parallel solid lines.
groove Looks like carved into the canvas.
ridge opposite effect of 'groove'.
inset Looks like embedded in the canvas.
outset opposite effect of 'inset'.
initial Sets this property to its default value.
inherit takes the computed value of its parent element border-bottom-style property.

The example below shows the border-style property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-style property</title>
  <style type="text/css">
    p {<!--from   w  w  w  .  j  a  v  a2  s. c  o m-->
      border-width: 3px;
    }
    p.none {
      border-style: none;
    }
    p.dotted {
      border-style: dotted;
    }
    p.dashed {
      border-style: dashed;
    }
    p.solid {
      border-style: solid;
    }
    p.double {
      border-style: double;
    }
    p.groove {
      border-style: groove;
    }
    p.ridge {
      border-style: ridge;
    }
    p.inset {
      border-style: inset;
    }
    p.outset {
      border-style: outset;
    }
    </style>
 </head>
 <body>
  <h1>Various border style.</h1>
  <p class="none">No border.</p>
  <p class="dotted">A dotted border.</p>
  <p class="dashed">A dashed border.</p>
  <p class="solid">A solid border.</p>
  <p class="double">A double border.</p>
  <p class="groove">A groove border.</p>
  <p class="ridge">A ridge border.</p>
  <p class="inset">An inset border.</p>
  <p class="outset">An outset border.</p>
 </body>
</html>

Related Tutorials