CSS border-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-width CSS property is used to specify the width of an element's borders. It allows you to control the thickness of each border edge (top, right, bottom, and left) individually or set them all at once with a shorthand notation. You can assign values in various units such as pixels, ems, or percentages to determine the border thickness. For example, border-width: 2px sets all four borders to a thickness of 2 pixels, while border-width: 1px 2px 3px 4px assigns different thickness values clockwise starting from the top border. This property is often used in combination with other border-related properties like border-style and border-color to create custom border styles for elements in web design.

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.borderWidth

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-width: <line-width>{1,4}

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

HTML

<div class="border">This is an example of the border-width property using a purple solid border 2px in width.</div>

CSS

.border {
   border-style: solid;
   border-width: 2px;
   border-color: purple;
   margin: 20px;
   padding: 20px;
}

Result

Editor

Browser Support

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

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	3	1	2

Last updated by CSSPortal on: 31st December 2023

Support Us