CSS border top width property

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

border top width property

CSS border-top-width property sets the width of a box's top border.

Syntax

border-top-width: width | inherit

Values

width: Width of the top border of a box. The following table shows the values :

Value	Description
thin	A thin border is set if specified
medium	A medium border is set if specified.
thick	A thick border is set if specified
length	You may use em, ex, in(for inches), cm(for centimeters), mm(for millimeters), pt(for points), pc(for picas), px(for pixel).
inherit	Specifies that the border width should be inherited from the parent element

inherit: If set, the associated element takes computed value of its parent element's border-top-width property.

Initial value

medium

Applies to

border-top-width property can be applied to all HTML elements which may form a box.

Inherited

No.

Percentages

Not available.

Media

visual.

Computed value

If the value set to none or hidden, it is 0, else it is an absolute value.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of border-top-width property

CSS code:

.w3r_thin {
border-top-width: thin;
border-style: solid;
}
.w3r_thick {
border-top-width: thick;
border-style: solid;
}
.w3r_medium {
border-top-width: medium;
border-style: solid;
}
.w3r_px{
border-top-width: 3px;
border-style: solid;
}
.w3r_pc {
border-top-width: 3pc;
border-style: solid;
}
.w3r_pt {
border-top-width: 3pt;
border-style: solid;
}
.w3r_mm {
border-top-width: 5mm;
border-style: solid;
}
.w3r_cm {
border-top-width: 1cm;
border-style: solid;
}
.w3r_in {
border-top-width: 1in;
border-style: solid;
}
.w3r_ex {
border-top-width: 3ex;
border-style: solid;
}
.w3r_em {
border-top-width: 3em;
border-style: solid;
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS border-top-width example - w3resource</title>
<link rel='stylesheet' href='border-top-width.css' type='text/css' />
</head>
<body>
<p  class="w3r_thin">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_thick">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_medium">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_px">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_pc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_pt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_mm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_in">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_cm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_em">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_ex">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

View this example in a separate browser window

Example of border-top-width property.

Previous: CSS border style property
Next: CSS border-right-width property