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.

Answer 1

To render native 1px borders on high DPI/@2x/retina displays, there are a couple of tricks.

On Firefox and Safari (macOS and iOS), use a 0.5px border:

/* Fallback: Most browsers now render 0.5px as 1px though */
.el {
  border: 1px solid red;
}
.retina .el {
  border: 0.5px solid red;
}

On Chrome, use a box-shadow with a 0.5px spread:

.retina-chrome .el {
  box-shadow: 0 0 0 0.5px red;
}

Use JS to add a class to the HTML element to only target @2x+ displays.

if (window.devicePixelRatio >= 2) {
  document.documentElement.classList.add(
    window.chrome ? 'retina-chrome' : 'retina'
  );
}

For @1x displays, use a slightly lighter color 1px border.

Answer 2

you can transform the line like that:

.thin{ -ms-transform:scale(1, 0.5); -webkit-transform:scale(1, 0.5); transform:scale(1, 0.5);}

or, if the line is vertical

.thin{ -ms-transform:scale(0.5, 1); -webkit-transform:scale(0.5, 1); transform:scale(0.5, 1);}

Answer 3

0.1em displays border smaller then 1px try dotted border with 1px and compare it with 0.1em

Answer 4

For me this worked:

• I needed a white border with less than 1px
• So I added some opacity to the border color and it started to look thiner than 1px
• like this:border-top: 1px solid #ffffff26;

Answer 5

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;
}

Answer 6

Maybe late post ,

<table>
  <tr>
    <td style="border:1px ridge">
    ....text....
    </td>
   </tr>
 <table>

using ridge(alternative) for thin border //IMO