CSS border-top Property

CSS border-top property is a shorthand property for setting all the top border properties in one statement.

CSS border-top property all values are optional except border-style.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderTop = "2px solid grey"

Syntax

Here is a syntax for the CSS border-top property

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

Property Values

The following table describes the values of this property.

Value Description
border-top-width Specifies the width of the top border of an element
border-top-style Specifies the style of the top border of an element
border-top-color Specifies the color of the top border of an element
transparent value also accepted here
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets top border width, style, color values.

.border-1 {
  border-top: 5px solid pink;
}
.border-2 {
  border-top: 5px dashed pink;
}
.border-3 {
  border-top: 5px dotted pink;
}
.border-4 {
  border-top: 5px double pink;
}
.border-5 {
  border-top: 5px groove pink;
}
.border-6 {
  border-top: 5px ridge pink;
}
.border-7 {
  border-top: 5px inset pink;
}
.border-8 {
  border-top: 5px outset pink;
}
.border-9 {
  border-top: 5px hidden pink;
}
.border-10 {
  border-top: none;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.