Skip to main content

Jay Sitter

Developer, designer, writer

Article

What Happens When Border Radii Overlap?

I’d wager that most times we’re rounding box corners in CSS, we’re applying a uniform border-radius value across the border. It’s a nice touch of polish in many designs. But there are times when we might want different radii for different corners. Easy, right? That way the property takes four values. Well, as it turns out, it’s actually possible to paint ourselves into a corner because rounded borders are capable of overlapping one other.… Read article “What Happens When Border Radii Overlap?”

Article

Focusing a `background-image` on a Precise Location with Percentages

Let’s say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move that background-image such that you’re focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We’re going to have to get clever.… Read article “Focusing a `background-image` on a Precise Location with Percentages”