HTML: Sub-pixel border

Question

Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually?

Thank you.

Solution 1

I think you could define the width of a border using units like em which would come out to less than 1px, and it would be valid. However, like Will Martin said, for display purposes it would just round it up or down to a whole pixel.

Solution 2

Edit: I have overseen the IE6 restriction, but I leave the answer here for others ...

Its possible with transform:scale(0.5) and put a border element with border:1px; inside. So you get a half pixel border, that (although tricked and browser dependend) is displayed on screen. But I use that trick for printing.

sure, you have to adapt the content of the element, or play with position

.outer {
  border:1px solid green;
}
.halfpix {
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform:scale(0.5);
  -webkit-transform:scale(0.5);
  transform:scale(0.5);
  width:200px;
  height:100px;
  border:1px solid black;
  }

<div class="outer">
  <div class="halfpix">
    </div>
  zoom browser window if your browser does not display 
  </div>

Solution 3

I don't know about IE8-10 (IE6-7 definitily no go) , but in Chrome and FF I get the thinnest border with box-shadow. Works best to get a 1px <hr> instead of the autorendered 2px, but can be used on a border as well.

The thin border on the HR is more prominent in FF than Chrome, but also Chrome renders 2px.

http://jsfiddle.net/GijsjanB/3G28N/

.thin {
    border: 1px solid white;
    box-shadow: 0 0 1px black;
}

Solution 4

No. You can't show a size smaller than one pixel because pixels are the basic unit of the monitor. And anyway, no browser I know of allows you to specify sub-pixel widths. They just get rounded up to 1px or down to 0px.

Solution 5

Try adding a box-shadow

box-shadow: 0px 0px 1px 0px black;

View more solutions

Comments

[Mamey]

Sounds like a recipe for disaster. It's hard enough to whole pixels to line up consistently across browsers.

[Will Martin]

True, you're right about em units evaluating to partial pixels in some cases. I had forgotten that.

[Francisc]

I see no difference in Chrome 20.

[tomekwi]

This is the only answer which answers the question. Thanks!

[Bjorn]

With modern resolutions this is no longer true. Monitors can render sub-pixel quality display items and many fonts actually require it in order to look decent on a retina style display.

[Roger Krueger]

Also an issue for printing—Chrome 52 ignores the (probably unknowable for it) printer pixels and uses 1px = 1/72in as the thinnest possible line. Tried fractional pixels, inches, ems—none would create a line thinner than 1/72in. Even in a print media query. Tempted to see if using an image works, but I suspect I'll just make my peace with the chubby rules

[Thomas Ahle]

Would the em trick work to get thinner lines on high definition screens, which draw "1px" lines with multiple pixels?

[Olga Gnatenko]

Thank you for pointing this out! FYI, if anyone has an issue with different border calculation in Chrome/FF and IE, please have this in mind.

[Sourav Ghosh]

Wrong Answer. ridge: "Displays a border with a 3D effect, like if it is coming out of the page"-MDN

[frosty]

All appear the same on Chrome 62 macOS 10.13 (retina display @2x). Using the box-shadow trick works though.

[crimson_penguin]

Very late, but yeah, it should!

[M3RS]

You can use scaleX(0.5) or scaleY(0.5) as well to scale in only one dimension, great answer!

[Adam Leggett]

This will not produce different results from equivalent px units on any browser.