Member Avatar for Flynox

Hey, I know I havn't been very active on this forum... Well, I have been lurking them, but not posting. Lol. But anywho, I have a question. Look on this website:
Notice the border size. It's less than a pixel. How would I do that? I know that using something like:

border 0.5px solid #222

will just make the browser decide the pixel size, and result in a 1 digit pixel instead, or make the pixel size 0. So how would I decrease the size of 1 pixel?

  • 3 Contributors
  • 3 Replies
  • 211 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Flynox

Dani AI

Generated

Short answer: that “less than a pixel” look is usually a hairline—either an image used as a border or a CSS trick that takes advantage of HiDPI screens and fractional CSS pixels. As hinted, units matter, but whether a fractional value actually paints a thinner line depends on how CSS pixels map to physical pixels on the device (the devicePixelRatio concept). (developer.mozilla.org)

Browser behavior is inconsistent. Modern WebKit/Gecko builds and newer Safari/Firefox may render fractional border widths (so 0.5px can produce a one‑device‑pixel hairline on DPR=2 displays), but many browsers will round or treat sub‑pixel borders as 0. That makes a plain 0.5px declaration unreliable without a fallback or detection. ’s suggestion that the site used an image is common because an image guarantees consistent results across browsers. (stackoverflow.com)

Practical options (pros/cons):

  • Small image / border-image: rock‑solid, but less flexible (color, radius). (n12v.com)
  • Background linear‑gradients to draw 1px lines: no extra files, flexible, but corners and complex borders are fiddly. (n12v.com)
  • Pseudo‑element + transform (scale): draw a 1px border on a ::before/::after sized 200% and scale it down. Works well as a cross‑browser fallback and is the technique many frameworks use for “hairlines.” (annualbeta.com)

Two quick patterns to try

Detection (adds class when fractional borders are supported):

// run after DOM ready
const test = document.createElement('div');
test.style.border = '.5px solid transparent';
document.body.appendChild(test);
if (test.offsetHeight === 1) document.documentElement.classList.add('hairlines');
document.body.removeChild(test);

Pseudo-element fallback (draws a scaled 1px border):

.box { position: relative; border: none; }
.box::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.12);
  transform-origin: 0 0;
  transform: scale(0.5);
  pointer-events: none;
}

Inspect the page with DevTools (as suggested) to confirm whether the site used an image or one of these CSS tricks; pick the method that best balances reliability, flexibility, and ease of maintenance. (stackoverflow.com)

Recommended Answers

All 3 Replies

Member Avatar for turt2live

You might want to look up 'em'.

Other measures are found here: http://www.w3schools.com/css/css_units.asp

You could also view source, open their CSS, and find the element. Just see what they did.

Member Avatar for RoyalElite96

I think they used an image and not a CSS Border (Firebug is awesome!).

Member Avatar for Flynox

You might want to look up 'em'.

Other measures are found here: http://www.w3schools.com/css/css_units.asp

You could also view source, open their CSS, and find the element. Just see what they did.

No. I tried all the measurements before I posted.

I think they used an image and not a CSS Border (Firebug is awesome!).

WOW I never would of thought! Lol. Thank you!

Edited by Flynox because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.