Pixel equivelant of border-width: thin/medium/thick

HTML & CSS
1

Does anybody know what the pixel equivalent of ‘thin’,‘medium’ and ‘thick’ values of the border-width property are?

I know they probably vary between browsers. I am more interested in IE6/IE7.

Any help is appreciated. :slight_smile:

2

Hi,

From what I can see - its:

Thick - 6px
Medium - 4px
Thin - 2px

I worked it out by experimenting with the below codes :wink:

<p style="border: thick solid #000000;">vvv</p>
<p style="border: 6px solid #000000;">vvv</p>

<br /><br />
<p style="border: medium solid #000000;">vvv</p>
<p style="border: 4px solid #000000;">vvv</p>

<br /><br />
<p style="border: thin solid #000000;">vvv</p>
<p style="border: 2px solid #000000;">vvv</p>

…and they all match up correctly - so that should be the correct figures =)

Cheers

Andy

3

Thanks Andy! :slight_smile:

4

The CSS specification doesn’t equate those keywords with any specific widths. It only says that a thin border must not be wider than a medium border, and a medium border must not be wider than a thick border.

If the exact dimensions are important, you should specify the border width in pixels instead of using the keywords.

5

The problem is that I am writing a script which highlights elements. In order to do this I need to get the computed padding and border widths so I can correctly position the absolutely positioned “highlight” div over the target element. I was going to tell script users simply not to use ‘thin’,‘medium’ or ‘thick’ but instead it makes more sense for me to reset each element’s border (if specified as medium/thin/thick) to 2px, 4px and 6px (these values seem about right for most browsers) when the page loads.