CSS border-top-width Property

Description

The border-top-width CSS property is used to specify the width or thickness of the top border of an element. It allows web developers to control the visual appearance of borders, defining how thick or thin the border line should be. This property accepts various units of measurement, such as pixels, ems, or percentages, and it can be set to different numeric values to achieve the desired border thickness. By adjusting the border-top-width, designers can create visually appealing layouts, enhancing the overall aesthetics and structure of their web pages.

Initial value
medium
Applies to
All elements
Inherited
No
Computed value
Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable
Yes
JavaScript syntax
object.style.borderTopWidth

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-top-width: <line-width> 

Values

<line-width> = <length> | thin | medium | thick
  • thinLess than the default width.
  • mediumDefault value.
  • thickGreater than the default width.
  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • inherit

Example

<div class="border">This is an example of the border-top-width property using a red solid border 3px in width.</div>
.border {
   border: 1px solid blue;
   border-top-style: solid;
   border-top-width: 3px;
   border-top-color: red;
   margin: 20px;
   padding: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-top-width property.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1112.2

Last updated by CSSPortal on: 31st December 2023