Member Avatar for dev.cplusplus

Hi, I have the following problem I hope someone can help me
I have the CSS file

#one
{
border-style: solid;
border-width: 5px
}
#two
{
border-style: solid;
border-width: thick
}
#three
{
border-style: solid;
border-width: thin
}
#four
{
border-style: solid;
border-width: medium
}

and the HTML file

<table>
<tr>
<td id='one'><div id='uno'>border-width: 5px</div></td>
<td id='two'><div id='dos'>border-width: thick</div></td>
<td id='three'><div id='tres'>border-width: thin</div></td>
<td id='four'><div id='cuatro'>border-width: medium</div></td>
</tr>
</table>

As you can see every div has a different border width that is from the CSS file, I want to know what is "border-width: thick" in pixels, cm or some number not in words. I read the explanation I found in the WEB:
thin - Defines a thin border
medium/Default - Defines a medium border
thick - Defines a thick border
Sometimes I need to situated floating objects according to its border so I need to know what is a thin/thick/medium border in numbers.

  • 3 Contributors
  • 3 Replies
  • 102 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

As discovered, the three keyword sizes are not fixed numeric values you can rely on across all browsers. The CSS specification leaves the mapping of thin/medium/thick up to the user agent, so different browsers (and user settings) can choose different pixel widths. See the spec for details: border-width — CSS2.1.

To get the actual pixel value the current browser is using for a particular element, ask the browser for the computed style. In modern browsers getComputedStyle usually returns pixel values:

var el = document.getElementById('yourElement');
var cs = window.getComputedStyle(el, null);
console.log(cs.getPropertyValue('border-left-width')); // e.g. "2px"

If the API you used (as suggested) still hands you a keyword, a reliable fallback is to render the border on a hidden element and measure it. Create a temporary element, give it a solid left border set to the same value you want to check, append it (visible but hidden), then read the layout difference. Example:

function measureBorderPx(value){
  var d = document.createElement('div');
  d.style.position = 'absolute';
  d.style.visibility = 'hidden';
  d.style.width = '0';
  d.style.borderLeftStyle = 'solid';
  d.style.borderLeftWidth = value;
  document.body.appendChild(d);
  var px = d.offsetWidth - d.clientWidth;
  document.body.removeChild(d);
  return px; // number of CSS pixels
}

Use the computed value from getComputedStyle (or the keyword) as value. Note: do not use display:none (measurements are zero) and fractional pixel rounding can occur. For layout that must be identical across browsers, specify numeric widths (px/em/rem) directly instead of relying on the keywords. For API details see getComputedStyle — MDN and border-width — MDN.

Recommended Answers

All 3 Replies

Member Avatar for ~s.o.s~

Use the getStyles function to get the CSS property of an element. You would probably get the width of the element in pixels but that should work fine for you.

Member Avatar for dev.cplusplus

I'm using getStyles, but if I request the 'border-width' property of the element, I'm receiving 'thick', but I want to know what is 'thick' in pixel or cm or some value I can use, 'thick' doesn't help me to situated floating objects:

border-style: solid;
border-width: thick

Thanks

Member Avatar for MidiMagic

These are browser-dependent.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.