CSS - border-style Property

Quiz

CSS border-style property sets the border styles for the four borders of an element. The property can take upto four values. Depending on the number of values provided, the border style will be applied to the border(s).

Syntax

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

Property Values

Value	Description
none	It specifies no border. Default value.
hidden	It is similar to none, except in border conflict resolution for table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It specifies a double border.
groove	It specifies a 3D grooved border. Effect depends on the border-color value.
ridge	It specifies a 3D ridged border. Effect depends on the border-color value.
inset	It specifies a 3D inset border. Effect depends on the border-color value.
outset	It specifies a 3D outset border. Effect depends on the border-color value.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Style Property

The following examples explain the border-style property with different values.

None Border Style

To not have any border style for the four borders, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-style: none;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'none' border style
      </h1>
      <p class="border-none">
         This border has 'none' border style
      </p>
   </div>
</body>

</html>

Transparent Border Style

To have borders that exists but are not visible, we can use the transparent value. The transparent value creates invisible border as compared to none, which creates no border. This difference is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid silver;
         border-style: none;
      }

      .border2 {
         border: 8px solid silver;
         border-color: gold;
         border-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have border
         indicated by the gap in all four directions.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since the border
         exist, the border color is applied to it 
         indicated by the gold color.
      </p>
   </div>
</body>

</html>

Dotted Border Style

To have four dotted borders, we use the dotted value. In the following example, dotted value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dotted {
         border-style: dotted;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-dotted">
         This heading has 'dotted' border style
      </h1>
      <p class="border-dotted">
         This border has 'dotted' border style
      </p>
   </div>
</body>

</html>

Dashed Border Style

To have four dashed borders, we use the dashed value. In the following example, dashed value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dashed {
         border-style: dashed;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-dashed">
         This heading has 'dashed' border style
      </h1>
      <p class="border-dashed">
         This border has 'dashed' border style
      </p>
   </div>
</body>

</html>

Solid Border Style

To have four solid borders, we use the solid value. In the following example, solid value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-solid {
         border-style: solid;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-solid">
         This heading has 'solid' border style
      </h1>
      <p class="border-solid">
         This border has 'solid' border style
      </p>
   </div>
</body>

</html>

Double Border Style

To have four double borders, we use the double value. In the following example, double value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-double {
         border-style: double;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-double">
         This heading has 'double' border style
      </h1>
      <p class="border-double">
         This border has 'double' border style
      </p>
   </div>
</body>

</html>

Groove Border Style

To have four groove borders, we use the groove value. In the following example, groove value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-groove {
         border-style: groove;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-groove">
         This heading has 'groove' border style
      </h1>
      <p class="border-groove">
         This border has 'groove' border style
      </p>
   </div>
</body>

</html>

Ridge Border Style

To have four ridge borders, we use the ridge value. In the following example, ridge value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-ridge {
         border-style: ridge;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-ridge">
         This heading has 'ridge' border style
      </h1>
      <p class="border-ridge">
         This border has 'ridge' border style
      </p>
   </div>
</body>

</html>

Inset Border Style

To have four inset borders, we use the inset value. In the following example, inset value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-inset {
         border-style: inset;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-inset">
         This heading has 'inset' border style
      </h1>
      <p class="border-inset">
         This border has 'inset' border style
      </p>
   </div>
</body>

</html>

Outset Border Style

To have four outset borders, we use the outset value. In the following example, outset value has been used with the border-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-outset {
         border-style: outset;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-outset">
         This heading has 'outset' border style
      </h1>
      <p class="border-outset">
         This border has 'outset' border style
      </p>
   </div>
</body>

</html>

Border Style Property with Different Styles

To have different border styles, we can provide different number of styles to the border-style property. The following example shows how this is done by taking different number of values.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         text-align: center;
         padding: 18px;
         margin: 8px;
         border-width: 5px;
         border-color: green;
         background-color: lightblue;
      }

      .border-one {
         border-style: solid;
      }

      .border-two {
         border-style: solid dashed;
      }

      .border-three {
         border-style: solid dashed dotted;
      }

      .border-four {
         border-style: solid dashed dotted double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h3>Single Value:</h3>
      <h2 class="borders border-one">
         This has single border style: 'solid'
         which is applied to all borders.
      </h2>
      <h3>Two Values:</h3>
      <h2 class="borders border-two">
         This has two border styles: 'solid'
         and 'dashed', solid style is applied
         to top and bottom borders, dashed style
         is applied to left and right borders.
      </h2>
      <h3>Three Values:</h3>
      <h2 class="borders border-three">
         This has three border styles: 'solid',
         'dashed' and 'dotted', solid is applied
         to top border, dashed to right and left
         borders and dotted to bottom border.
      </h2>
      <h3>Four Values:</h3>
      <h2 class="borders border-four">
         This has four border styles: 'solid',
         'dashed','dotted' and 'double', solid
         is applied to top border, dashed to 
         right border, dotted to bottom border
         and double to left border.
      </h2>

   </div>
</body>

</html>

Supported Browsers

Property
border-style	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page