border-top - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-top

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-top

Description

The border-top CSS property sets the width, style, and color of the top border of an element.

It is a shorthand property for setting the individual top border properties i.e. border-top-width, border-top-style, and border-top-color in a single declaration.

The following table summarizes the border-top Property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: No
Animatable:Yes, See individual properties.

Syntax

The syntax of the property is as follows: 


border-top:     [ border-top-width border-top-style border-top-color ] | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
border-top-width Sets the width of the element top border.
border-top-style Sets the line style of the element top border.
border-top-color Sets the color of the element top border.
initial Sets this property to its default value.
inherit take the value of its parent element border-top property.

The example below shows the border-top property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-top property</title>
  <style type="text/css">
    h1 {<!--from www . jav a  2s.  c  om-->
      border-top: 5px dashed #ff0000;
    }
    p {
      border-top: 3px dotted #00ff00;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials