19

can i have half pixel in border width like this , I tried it but it is not working 

  element.style {
    border-left-width: 0.5px;
    border-color: #818181;
    border-left-style: solid;
   }
KJA
  • 743
  • 3
  • 9
  • 21
  • 4
    How does one have half a pixel? A pixel is a physical thing. – Jonathon Reinhart Nov 21 '13 at 08:48
  • How can the processor divide a screen pixel into two and show your border in one of the halves? For that you will need to devise some mechanism to physically cut the pixel in two... – Ganesh Jadhav Nov 21 '13 at 08:49
  • 1
    half pixels may work for Mozilla, Crome.But will create problems in IE – Zword Nov 21 '13 at 08:53
  • @user2648239 Mozilla and Crome will still render the half pixel as one pixel. And IE will sometimes render it as one pixel or else will not render at all. – Ganesh Jadhav Nov 21 '13 at 08:55
  • @JonathonReinhart Not quite. A pixel is defined as (0.75 * 1/72 * 2.54) cm: 1 px = 0.75 pt, 1 pt = 1/72 inch, 1 inch = 2.54 cm – user247702 Nov 21 '13 at 08:56
  • I see the exact opposite. IE renders half pixels fine (and is smart about how they're handled at higher DPI scales, which is really the intention). However, Chrome 37 refuses to render the 0.5px border. Firefox works. – Brandon Paddock Sep 24 '14 at 17:38
  • 8
    @JonathonReinhart (and Stijn) Actually neither of those statements is correctly. Pixels in CSS are "device independent" or "relative" pixels. They're an abstract unit of measure. On high DPI/PPI devices, a single CSS pixel may become two physical pixels. A 4px measure may become 6px, or 8px. Fractional pixels are actually quite useful as a 0.5px border should round up to 1px at 1.0 scale factor, and remain 1px (as thin as possible) at 1.5 or 2.0 scale. – Brandon Paddock Sep 24 '14 at 17:46
  • 2
    Even on regular DPI devices where 1 physical px = 1 css px, you could render half pixels by using the provided color and applying 50% transparency. Browsers deliberetaly don't do that on borders, but this is typcially what vector graphics rendering engines do, and is a nice side-effect of something called "anti-aliasing". – dim Oct 12 '17 at 07:57

5 Answers5

33

Most of browsers will not display fraction pixel borders correctly.

It's better to use box-shadow for such cases. It can display fractions of pixels.

.one-pixel-border {  
    box-shadow: -1px 0 0 #818181;
}

.half-pixel-border {  
    box-shadow: -.5px 0 0 #818181;
}

.quarter-pixel-border {
    box-shadow: -.25px 0 0 #818181;
}
<div class="one-pixel-border">
  one pixel border
</div>
<div class="half-pixel-border">
  half pixel border
</div>
<div class="quarter-pixel-border">
  quarter pixel border
</div>
moritzg
  • 4,266
  • 3
  • 37
  • 62
ujeenator
  • 26,384
  • 2
  • 23
  • 28
  • This method breaks down if, for any reason, your layout puts the edge of the element on a boundary between physical device pixels. `box-shadow` does not snap to the nearest physical pixel. – Adam Leggett Dec 27 '19 at 22:41
14

I think that is achievable by either transform or translate options here. For example this:

border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);

will render a sort of a half-size border. Also check the article by Priit Pirita which might be useful :)

boldnik
  • 2,547
  • 2
  • 27
  • 32
  • So good answer! Thank you very much! It's probably the most cross-browser way of achieving the desired result. – Igor Bykov Feb 27 '20 at 14:58
12

Theorically speaking, you can't do that because the pixel is the smallest physical unit used to display stuff on your screen ; however, you could want to do that for high resolution devices, like Retina and others.

adamdport
  • 11,687
  • 14
  • 69
  • 91
Jérémy Dutheil
  • 6,099
  • 7
  • 37
  • 52
8

The reason why border-width:0.5px does not work is that browsers do layout with regards to (device independent) pixels. Even though physical pixels might be much smaller, so they can render elements smaller than a pixel, this doesn't affect the layout.

Since the css border property affects layout, browsers will only allow integer pixel widths. The box-shadow only affects the rendering and not the layout, and therefore supports fractional units.

David Narum
  • 312
  • 2
  • 3
2

You could try to get a smaller border then 1px by using em.

But anyway it will always round to full pixels because like Jeremy said it is the smallest display unit.

Igl3
  • 4,900
  • 5
  • 35
  • 69
  • I though about this also, I tested it on iPhone 5s and it seems to work there at least in Safari :) – OZZIE May 25 '15 at 13:53