HTML: Sub-pixel border

问题:

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.

回答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.

回答2:

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>

回答3:

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.

回答4:

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

回答5:

Although this isn't (currently) possible in any version of IE or Edge, on the latest versions of Firefox and Chrome you can now use border width values less than 1px.

.borderTest {
	box-sizing: border-box;
	display: block;
	margin: 0.5em;
	padding: 0.5em;
	width: calc( 100% - 1em );
}
.borderTest:nth-child(1){
	border: 1px solid #000
}
.borderTest:nth-child(2){
	border: 0.75px solid #000
}
.borderTest:nth-child(3){
	border: 0.5px solid #000
}
.borderTest:nth-child(4){
	border: 0.25px solid #000
}

<div class="borderTest">1px</div>
<div class="borderTest">0.75px</div>
<div class="borderTest">0.5px</div>
<div class="borderTest">0.25px</div>

This outputs the following on a UHD screen:

回答6:

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

回答7:

Maybe late post ,

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

using ridge(alternative) for thin border //IMO

回答8:

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

回答9:

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.

回答10:

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;