CSS Border Less Than 1Px

CSS border less than 1px

A pixel is the smallest unit value to render something with, but you can trick thickness with optical illusions by modifying colors (the eye can only see up to a certain resolution too).

Here is a test to prove this point:

div { border-color: blue; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }

<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>

Border is less than 1 pixel, how is this happening?

It is indeed possible to render 0.5px when using CSS. The answer to the question is simply that a px in CSS does not always translate to one pixel on the computed properties because it can be impacted by the screen density. You can read more about it here: https://www.w3.org/TR/CSS21/syndata.html#length-units

I would like to mention that I am using a hi-dpi screen which may explain why my computed properties are very accurate.

The top one has a border-top-width of 0.5 pixels.

Top has a border-top-width of 0.5px whilst the bottom is 1px all the way round.

The top input's computed properties

HTML: Sub-pixel border

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.

Mystery how google makes borders half as thick but still set to 1 pixel

It is a very bright border-color on a white background. Maybe you try to set the border-color to a different background-color? panther is correct with his comment, 1px is 1px, but with some optical tricks, you can make the border appear thinner, than it actually is.

Take a quick look at the example below: Both <div> at the top contain a <div> with the same border-color and thickness. But the one on the black background seems to be much thicker, since the contrast between the border and the background is very high.

On the bottom there is a white background with some different borders, and you will probably notice, that the lighter ones look thinner, than the dark ones. It is just an optical trick, Google is using to play with the appearance :-)

Edit:

It turned out, that o0o0o0o0o actually has a high DPI Display, which is able to display "half pixels" since 1px width is not necessarily equal to one pixel of the display on high DPI Settings. So you actually can set the border width to a float value, but it obviously will only be visible to users with higher DPI Displays. A "regular" Monitor will show it as 1px, since its not possible to display half pixels (which also is kind of obvious ;) )

.wrapper {  float: left;  width: 30%;  height: 300px;  padding: 30px;}
.black {  background: black;}
.white {  background: white;}
.border {  border: solid 1px #E0E0E0;  padding: 10px;}
.bottom {  clear: both;  background: white;  width: 60%;  padding: 60px;  height: 200px;}
.bottom div {  margin-bottom: 30px;}
.border-10 {  border-bottom: 1px solid #efefef;}
.border-30 {  border-bottom: 1px solid #ccc;}
.border-50 {  border-bottom: 1px solid #a0a0a0;}
.border-70 {  border-bottom: 1px solid #707070;}.border-90 {  border-bottom: 1px solid #383838;}

<div class="wrapper black">  <div class="border">    Lorem Ipsum  </div></div><div class="wrapper white">  <div class="border">    Lorem Ipsum  </div></div><div class="bottom">  <div class="border-10"></div>  <div class="border-30"></div>  <div class="border-50"></div>  <div class="border-70"></div>  <div class="border-90"></div></div>

border-width in em - but set a minimum border-width

In CSS3, you can try to (ab)use the max css function, if your browser supports it.

border-width: max(1px, 0.1em);
border-style: solid; 
border-color: black;

Unfortunately this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon!

But in CSS2 – no, you can't.

However, you can use JavaScript/jQuery to loop through all elements and increase the border size to 1px.

But this will eat so much performance your browser is gonna crash if you have too many elements on your page (e.g. a table with more than 50-100 rows).

So in other words, no it's not possible.

$("[id$='ReportViewerControl']").find('*')

    .each(function () {

        if($(this).is('#ParametersRowReportViewerControl *')) 
            return;

        //console.log("Processing an element");
        //var cls = $(this).attr("class");

        // Don't add a border to sort-arrow
        if ($(this).is('img')) {
            return;
        }

        var anywidth = $(this).css('width');
        var anywidth = parseFloat(anywidth);
        //console.log("anywidth: " + anywidth);


        //var lol = $(this).css('borderLeftWidth');
        var blw = $(this).css('border-left-width');
        var brw = $(this).css('border-right-width');
        var btw = $(this).css('border-top-width');
        var bbw = $(this).css('border-bottom-width');

        var borls = $(this).css('border-left-style') == "solid";
        var borrs = $(this).css('border-right-style') == "solid";
        var borts = $(this).css('border-top-style') == "solid";
        var borbs = $(this).css('border-bottom-style') == "solid";

        var blw = parseFloat(blw);
        var brw = parseFloat(brw);
        var btw = parseFloat(btw);
        var bbw = parseFloat(bbw);

        //parseInt($(this).css("borderRightWidth"))
        //console.log(parseInt($(this).css("borderLeftWidth")));

        // UpdateLock = true;


        // Set width to 1px where 0px
        if (anywidth == 0)
            $(this).css('width', '1px');

        if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
            //console.log("setting border width");
            $(this).css('border-left-width', '1px');
        }

        if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
            $(this).css('border-right-width', '1px');
        }

        if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
            $(this).css('border-top-width', '1px');
        }

        if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
            $(this).css('border-bottom-width', '1px');
        }

        // UpdateLock = false;
    });           // End $('*').each

Why would chrome subtract a bit less than .1px from the width of a border?

This is the result of using the chrome zoom feature. If you zoom in chrome, it is implemented by multiplying a factor into the css. and, in some cases, it wipes out borders.

CSS Border Less Than 1Px