CSS border-width
CSS border-width is the property you use to control how thick or thin an element’s border appears. You can set it to specific values (like 2px, 0.5em) or keywords (thin, medium, thick) to get the exact look you want — all without changing the HTML itself.
Border-width
border-width decides how thick or thin the element’s border will be – like 1px, 5px, or thin / medium / thick. But remember, if the border-style value is none (which is by default), then the border will not be visible even if you set the width. So, to show the border, it is important to set the border-style as well, like solid, dashed, or some other style.
Syntax
border-width: 5px;
/*or*/
border-top-width: 5px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;border-width values:
length units: px, em, rem, cm, mm, vh, etc (e.g. 5px, 0.2rem)
keywords: thin, medium, thick
0 (zero) — unitless 0 is allowed and means no border width
Note: Negative values are not allowed.
border-width shorthand
border-width: A; → top, right, bottom, left = A (all same)
border-width: A B; → top = A, right = B, bottom = A, left = B (A = top/bottom, B = right/left)
border-width: A B C; → top = A, right = B, bottom = C, left = B (middle value applies to left & right)
border-width: A B C D; → top = A, right = B, bottom = C, left = D
Example:
border-width: 4px; → T/R/B/L = 4/4/4/4
border-width: 2px 6px; → T/R/B/L = 2/6/2/6
border-width: 1px 3px 5px; → T/R/B/L = 1/3/5/3
border-width: 1px 2px 3px 4px; → T/R/B/L = 1/2/3/4
Side-specific properties (override)
If you have given border-width shorthand and then given border-left-width, then the side-specific property will override it.
Example:
.box {
border-width: 5px; /* all sides are 5px */
border-style: solid; /* if style is not set then border will not be visible */
border-left-width: 12px; /* left side will now be 12px */
}Here final left = 12px, remaining sides = 5px.
Example:
HTML:
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
<div class="box-4">Box-4</div>CSS:
div{
margin: 10px;
}
.box-1 {
width: 220px;
padding: 10px;
border-style: solid; /* To show border */
border-width: 10px; /* all sides 10px */
}
.box-2 {
width: 220px;
padding: 10px;
border-style: solid;
border-width: 5px 15px; /* top/bottom 5px, left/right 15px */
}
.box-3 {
width: 220px;
padding: 10px;
border-style: dashed;
border-width: 2px 8px 12px; /* top 2px, left/right 8px, bottom 12px */
}
.box-4 {
width: 220px;
padding: 10px;
border-style: solid;
border-width: 3px;
border-left-width: 20px; /* left specifically 20px, override karta hai */
}Most Important Questions
If border-width is given but border-style is not set, will the border appear? Why?
No. By default, border-style is none, and a border cannot appear without a visible style. The browser ignores width and color unless a visible style like solid or dashed is applied.
Which property has higher priority — border-width shorthand or side-specific properties like border-top-width?
Whichever is written later in the CSS takes priority. CSS applies the last declared value according to cascade rules.
When using thin, medium, and thick as border-width values, are these exact fixed sizes?
No. They are keyword values whose exact pixel sizes can vary between browsers. Usually, they are around 1px (thin), 3px (medium), and 5px (thick), but they are not guaranteed to be identical in all browsers.
In border-width: 5px 10px, which sides get 5px and which get 10px?
The first value (5px) applies to top and bottom, the second value (10px) applies to left and right.
In border-width: 5px 10px 15px, which side gets 15px?
The third value applies to the bottom border. The order is top → right/left → bottom when three values are used.
Can border-width take percentage values like 50%?
No. The CSS specification defines border-width to accept only absolute units (px, em, etc.) or the keywords thin, medium, and thick. Percentages are ignored or treated as invalid.
Does border-width alone change the element’s size?
Only if border-style is set to something visible. If style is none, the width doesn’t contribute to the element’s box model.
If a parent element has border-width: 4px and the child has border-width: inherit, what will happen?
The child will have the same computed border width (4px) as the parent.
Does border-width affect text alignment inside an element?
Not directly. It increases the element’s total size, which can indirectly affect how text is positioned, but alignment properties like text-align or vertical-align control the actual text alignment.
If no border-color is specified, what color will the border take?
It will take the value of the element’s color property (the text color) by default.