Thursday, February 20, 2020

css: sub-pixel borders

So in CSS, it looks like borders of less than one pixel width aren't really a thing, but you can achieve something similar with a CSS box shadow:
.thingy {
  0 0 0 0.5px white;
}

The first 0s are for the horizontal and vertical offset, we don't want a blur, and then we're trying for a 0.5 spread.

The result is something like this:
versus, regular border (with border-radius)
UPDATE: we want back to a simple 1 pixel border... the background image had a zoom effect on hover that would cause the badge to lose its "border" on the bottom, momentarily - very distracting.

No comments:

Post a Comment