CSS border-width Property

CSS border-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-width property determines the visual thickness of an element’s border area and therefore how much space the border occupies around content. Changing border thickness alters the element’s frame and can affect perceived emphasis and separation between elements: thicker borders draw more attention and create a stronger visual boundary, while thinner borders are subtler. Because borders are part of the element’s painted box, their thickness is an important design tool for hierarchy, focus states and visual rhythm in UI layouts.

Although border thickness itself does not inherit from parent elements, it participates directly in the box model and therefore influences layout calculations. When an element’s box sizing model differs, the way border thickness contributes to the element’s overall dimensions can change - see box-sizing for details on that relationship. Developers should be mindful that increasing border thickness can push nearby layout or require compensating adjustments to padding and content size to preserve intended spacing.

The appearance and visibility of the border thickness are meaningful only when the element’s border style is such that a border is drawn; the interaction with border-style determines whether the thickness will be rendered at all, and border-color controls its hue. Many authors choose to manage width together with color and style via the shorthand border, which can simplify declarations while keeping the relationship between those properties explicit. Also note that rounded corners created by border-radius visually clip or soften the border’s outer edges, so thickness interacts with corner radii to determine the final outline shape.

Beyond aesthetics, border thickness can affect hit-testing and the effective touch target of elements on interactive interfaces: a larger border increases the clickable area if padding and content sizes remain constant. From a rendering perspective, extreme or frequently changing border thicknesses can also influence repaint costs in dynamic UIs, so it’s worth considering performance when animating or toggling border dimensions.

Definition

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='example'>

    <h1>CSS border-width examples</h1>



    <div class='box thin'>Thin border (1px)</div>

    <div class='box medium'>Medium border (6px)</div>

    <div class='box thick'>Thick border (12px)</div>

    <div class='box sides'>Different sides: top 2px, right 8px, bottom 12px, left 4px</div>



    <div class='box-group'>

        <div class='side top'>Top border-width: 10px</div>

        <div class='side right'>Right border-width: 10px</div>

        <div class='side bottom'>Bottom border-width: 10px</div>

        <div class='side left'>Left border-width: 10px</div>

    </div>

</div>

CSS

:root {
    --accent: #0b78d1;
    --muted: #6b7280;
}

body {
    margin: 24px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #f7fafc;
    color: #111827;
}

.example {
    max-width: 720px;
    margin: 0 auto;
}

h1 {
    font-size: 20px;
    margin-bottom: 12px;
}

.box {
    background: #fff;
    padding: 12px 16px;
    margin: 12px 0;
    border-style: solid;
    border-color: var(--accent);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.box.thin {
    border-width: 1px;
}

.box.medium {
    border-width: 6px;
}

.box.thick {
    border-width: 12px;
}

.box.sides {
    border-width: 2px 8px 12px 4px; /* top right bottom left */
}

.box-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.side {
    background: #fff;
    padding: 12px;
    border-style: solid;
    border-color: #16a34a;
    border-width: 1px; /* default small border */
    border-radius: 6px;
}

.side.top {
    border-top-width: 10px;
}

.side.right {
    border-right-width: 10px;
}

.side.bottom {
    border-bottom-width: 10px;
}

.side.left {
    border-left-width: 10px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-width property. Hover over a browser icon to see the version that first introduced support for this CSS property.