CSS: border-width property
This CSS tutorial explains how to use the CSS property called border-width with syntax and examples.
Description
The CSS border-width property defines the border width of a box.
Syntax
The CSS border-width property can be expressed with one, two, three or four values provided.
Syntax - One Value
The syntax for the CSS border-width property (with 1 value) is:
border-width: all;
When one single value is provided, the border-width value will apply to all four sides of the box (ie: top, right, bottom, left).
Syntax - Two Values
The syntax for the CSS border-width property (with 2 values) is:
border-width: top_bottom left_right;
When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.
Syntax - Three Values
The syntax for the CSS border-width property (with 3 values) is:
border-width: top right_left bottom;
When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.
Syntax - Four Values
The syntax for the CSS border-width property (with 4 values) is:
border-width: top right bottom left;
When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.
The top, right, bottom, and left padding values can be one of the following:
Value | Description |
---|---|
fixed | Fixed value expressed in px, em, ... div { border-width: 2px; } div { border-width: 1em 1px; } div { border-width: 2px 5px 4px; } div { border-width: 4px 0 2px 3px; } |
thin | Thin border width, which might be 1px or 2px depending on the browser div { border-width: thin; } |
medium | Medium border width, which might be 3px or 4px depending on the browser div { border-width: medium; } |
thick | Thick border width, which might be 5px or 6px depending on the browser div { border-width: thick; } |
Note
- You can combine thin, medium, thick, and fixed values in the CSS border-width property.
- See also the border, border-color, and border-style properties.
Browser Compatibility
The CSS border-width property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-width property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values.
div { border-width: 2px; }
In this CSS border-width example, we have provided one value of 2px which would apply to all 4 sides of the box.
Next, we'll look at a CSS border-width example where we provide two values.
div { border-width: 5px medium; }
In this CSS border-width example, we have provided two values. The first value of 5px would apply to the top and bottom of the box. The second value of medium would apply to the left and right sides of the box.
Next, we'll look at a CSS border-width example where we provide three values.
div { border-width: 5px thin 10px; }
In this CSS border-width example, we have provided three values. The first value of 5px would apply to the top of the box. The second value of thin would apply to the right and left sides of the box. The third value of 10px would apply to the bottom of the box.
Next, we'll look at a CSS border-width example where we provide four values.
div { border-width: thick 10px 12px 0; }
In this CSS border-width example, we have provided four values. The first value of thick would apply to the top of the element. The second value of 10px would apply to the right side of the box. The third value of 12px would apply to the bottom of the box. The fourth value of 0 would apply to the left side of the box.
Advertisements