CSS - border-top Property

Quiz

CSS border-top property is a shorthand property for setting the border-top properties border-top-width, border-top-style and border-top-color in one single declaration. The border-top-style must be declared to use this property. Default values of other properties will be used if not provided.

Syntax

border-top: border-width border-style border-color | initial | inherit;

Property Values

Value	Description
border-top-width	It specifies the width of element's top border. Optional. Default value is medium.
border-top-style	It specifies the style of element's top border. Required. Default value is none.
border-top-color	It specifies the color of element's top border. Optional. Default value is the color of the text.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Top Property

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

Defining All Values of Border Top Property

To define the values of border-top-width, border-top-style and border-top-color in one single declaration, we use the border-top property. Three values are to be given, first value for width, second value for style and third for color. The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
      .examples {
        text-align: center;
        padding: 20px;
      }

      .example1 {
        border-top: 7px solid green;
        background-color: lightblue;
      }

      .example2 {
        border: 2px solid black;
        border-top: 7px double red;
      }
    </style>
</head>

<body>
    <h2>
      CSS border-top property
    </h2>
    <h2 class="examples example1">
      This heading has a 'green' color, 'solid'
      style and '7px' width border top
    </h2>
    <p class="examples example2">
      This box has a 'red' color, 'dashed' style
      and '7px' width border top
    </p>
</body>

</html>

Constituent Proeprties of Border Top Property

The border-top property is a combination of border-top-width, border-top-style and border-top-color properties. The following example shows how these properties can be used in combination to show the border-top property effect.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    .examples {
      text-align: center;
      padding: 20px;
    }

    .example1 {
      border-top-width: 8px;
      border-top-style: dashed;
      border-top-color: red;
      background-color: lightgreen;
    }

    .example2 {
      border: 2px solid black;
      border-top-width: 8px;
      border-top-style: dotted;
      border-top-color: purple;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-top property
  </h2>
  <h2 class="examples example1">
    This heading has a 'red' color, 'dashed'
    style and '8px' width border top
  </h2>
  <p class="examples example2">
    This box has a 'purple' color, 'dotted'
    style and '8px' width border top
  </p>
</body>

</html>

Supported Browsers

Property
border-top	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page