Half Pixel in Border Width Size It Is Not Showing

Half pixel in border width size it is not showing

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.

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>

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>

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.

Inconsistent, half-pixel offset on identical HTML elements in Firefox only

I was able to recreate the issue by zooming Firefox in to 130% (and some other bigger sizes too)

Setting the height on both .game-result-spacer-blue-active and .game-result-spacer-red-active to 110px seems to get things to line up.

Or you could change the .team-result class along with those other 2 to have a 100% height

Or just try something different to get the diagonal line appearance to work instead of using borders. I imagine Firefox calculates the scaling differently for divs and borders and somehow ends up being off because of this. I'm not completely sure of the ins and outs of what it's doing that causes this to happen though.

Can a CSS pixel be a fraction?

Yes, you can specify fractional pixels. As this has been part of CSS since the very first version, it should be well supported by any browser that supports CSS at all.

Reference: CSS 2.1: 4.3.2 Lengths

"The format of a length value (denoted by <length> in this
specification) is a <number> (with or without a decimal point)
immediately followed by a unit identifier (e.g., px, em, etc.)."

When the elements are displayed on the screen, most browsers will naturally round the position to the nearest pixel when using 100% zoom level. On higher zoom levels you will notice that fractional pixel values are recognized.

Can you have a 0.5px border on a Retina Display?

I wrote an overview of different techniques:

Half-pixel border

border: 0.5px solid black;

Cons:

• Works only in Firefox and Webkit Nightly.

border-image

border-width: 1px;
border-image: url(border.gif) 2 repeat;

border.gif is a 6×6 pixel image:

Pros:

• It works!

Cons:

• An external image. It’s only 51 bytes and it can be inlined using Data URI. You’d need to fire up Photoshop (or whatever you use) to change the border color, which isn’t very convenient.

Multiple background images

background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;

“How to target physical pixels on retina screens with CSS” describes how to draw a line. Draw 4 lines and we have a border.

Pros:

• No external images.

Cons:

• Cumbersome syntax, although it can be abstracted out with CSS preprocessors.

Scale up and down

Mentioned here already by Priit Pirita.

React Native: Half pixel border issues on high Pixel Density devices

You can use hairlineWidth like this:

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  elementWithHalfPixelBorder: {
    borderWidth: StyleSheet.hairlineWidth,
  },
});

---

Related Topics