CSS - border-top-width Property

Quiz

CSS border-top-width property determines the width of the top border of an element. The border-style or border-top-style must be declared before using this property.

Syntax

border-top-width: medium | thin | thick | length | initial | inherit;

Property Values

Value	Description
medium	It specifies medium width of top border. Default.
thin	It specifies a thin top border.
thick	It specifies a thick top border.
length	Thickness can be given in the form of value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Top Width Property

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

Border Top Width Property with Medium Value

To set a medium width to the top border, we can use the medium value. In the following example, medium value has been used for the border-top-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-top-style:solid;
         border-top-width: medium;
      }

      .border {
         border: 1px solid #e74c0c;
         border-top-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'medium' 
         border-top-width.
      </h2>
      <p class="properties border">
         This border has a 'medium' 
         border-top-width.
      </p>
   </div>
</body>

</html>

Border Top Width Property with Thin Value

To set a small width to the top border, we can use the thin value. In the following example, thin value has been used for the border-top-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-top-style:solid;
         border-top-width: thin;
      }

      .border {
         border: 3px solid #e74c0c;
         border-top-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'thin' 
         border-top-width.
      </h2>
      <p class="properties border">
         This border has a 'thin' 
         border-top-width.
      </p>
   </div>
</body>

</html>

Border Top Width Property with Thick Value

To set a thick width to the top border, we can use the thick value. In the following example, thick value has been used for the border-top-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-top-style:solid;
         border-top-width: thick;
      }

      .border {
         border: 1px solid #e74c0c;
         border-top-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'thick' 
         border-top-width.
      </h2>
      <p class="properties border">
         This border has a 'thick' 
         border-top-width.
      </p>
   </div>
</body>

</html>

Border Top Width Property with Length Values

To set the width of the top border, we can specify the width using length values (eg. 10px, 15px etc.). In the following example, length values have been used for the border-top-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-top-style:solid;
         border-top-width: 10px;
      }

      .border {
         border: 1px solid #e74c0c;
         border-top-width: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 10px 
         border-top-width.
      </h2>
      <p class="properties border">
         This border has a 10px 
         border-top-width.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-top-width	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page