Log in Try the demo

Loading…

Dataset 20260827-2142-2f1b575 · measured 2026-08-27 21:42 UTC

border

✕renders differentlycss-borders-4

The property takes effect, but our pixels are not Chrome's. The difference map on this page shows where.

What the specification says

Initial value: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Syntax: <line-width> || <line-style> || <color>

css-borders-4 definition

The measurements

Each example is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.

border:20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:thin✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:medium✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:thick✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:hidden✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:#e07a1f✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:none✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:solid✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

border:groove✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

2,532 pixels differ from Chrome, the largest by 179 of 255 on one channel.

Differing pixels: 2,532
Max channel delta: 179

the example page

border:ridge✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

2,532 pixels differ from Chrome, the largest by 159 of 255 on one channel.

Differing pixels: 2,532
Max channel delta: 159

the example page

border:inset✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

2,532 pixels differ from Chrome, the largest by 179 of 255 on one channel.

Differing pixels: 2,532
Max channel delta: 179

the example page

border:outset✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

2,532 pixels differ from Chrome, the largest by 165 of 255 on one channel.

Differing pixels: 2,532
Max channel delta: 165

the example page

Which values were measured

“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 16 branches; 12 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.

Value	Measured
20px	✓pixel-exact
hairline	not measured
thin	✓pixel-exact
medium	✓pixel-exact
thick	✓pixel-exact
hidden	✓pixel-exact
dotted	not measured
dashed	not measured
solid	✓pixel-exact
double	not measured
groove	✕renders differently
ridge	✕renders differently
inset	✕renders differently
outset	✕renders differently
#e07a1f	✓pixel-exact
none	✓pixel-exact

Measured against Chrome 148.0.7778.96 on 2026-08-27, with up to 40 candidate values tried per property. All properties · How the measurement works