CSS border-style (Set/Change Border Style)

The CSS border-style property is used to define the style of border around an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border-style: solid; border-color: maroon; border-width: 8px;}
      p {border-style: dashed;}
   </style>
</head>
<body>

   <h2>The border-style Property</h2>
   <p>This is a para.</p>
   
</body>
</html>

Output

The border-style Property

This is a para.

CSS border-style Syntax

The syntax of border-style property in CSS, is:

border-style: solid|dashed|dotted|double|ridge|groove|inset|outset|initial|inherit|none|hidden;

Note - All border style values are described in separate tutorial

CSS border-style with Multiple Values

We can also define the border-style property using multiple values.

border-style with Four Values

First value applies to top border
Second value applies to right border
Third value applies to bottom border
Fourth value applies to left border

border-style with Three Values

First value applies to top border
Second value applies to right and left border
Third value applies to bottom border

border-style with Two Values

First value applies to top and bottom border
Second value applies to right and left border

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border-color: crimson; border-width: 8px; padding: 10px;}
      p#a {border-style: dashed solid dotted double;}
      p#b {border-style: dashed solid dotted;}
      p#c {border-style: dashed solid;}
      p#d {border-style: solid;}
   </style>
</head>
<body>

   <p id="a">This is para one.</p>
   <p id="b">This is para two.</p>
   <p id="c">This is para three.</p>
   <p id="d">This is para four.</p>
   
</body>
</html>

Output

This is para one.

This is para two.

This is para three.

This is para four.

CSS Online Test

« Previous Tutorial Next Tutorial »