Skip to main content
CSS is fun and cool and I like it.

Articles Tagged border-radius

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
4 Articles
{
,

}
Article

What Happens When Border Radii Overlap?

Avatar of Jay Sitter
Author
Jay Sitter
8 Comments
Join Conversation

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?”

Link

Animating CSS Width and Height Without the Squish Effect

Avatar of Chris Coyier
Shared by
Chris Coyier

The first rule of animating on the web: don’t animate width and height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating any transform property is faster (and “cheaper”).

Butttt, transform can be tricky. Check out how complex this menu open/close animation becomes in order to make it really performant. Rik Schennink blogs about another tricky situation: border-radius. When you animate … Read article “Animating CSS Width and Height Without the Squish Effect”

Our Notes   /   Read at pqina.nl
Article

Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges

Avatar of Šime Vidas
Author
Šime Vidas

In this week’s roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline.… Read article “Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges”

Link

CSS border-radius can do that?

Avatar of Robin Rendle
Shared by
Robin Rendle

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:

.element {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into … Read article “CSS border-radius can do that?”

Our Notes   /   Read at 9elements.com