CSS - border-top-style Property

Quiz

CSS border-top-style property sets the style of an element's top border.

Syntax

border-top-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 Top Style Property

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

None Border Top Style

To not have any top border, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Transparent Border Top Style

To have a border that exists but is 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-top-style: none;
      }

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

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

</html>

Dotted Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Dashed Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Solid Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Double Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Groove Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Ridge Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Inset Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Outset Border Top Style

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

Example

<!DOCTYPE html>
<html>

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

      h1 {
         background-color: lightgreen;
      }

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

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

</html>

Supported Browsers

Property
border-top-style	1.0	5.5	1.0	1.0	9.2

css_reference.htm

Print Page