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

Edit: I have overseen then 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>

Answer 2

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

Answer 3

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 4

Maybe late post ,

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

using ridge(alternative) for thin border //IMO