Pixelated rounded corners!

Generate pixelated rounded corners for your website using CSS clip-path!

Built by Luke Bonaccorsi

Read about how this technique works in the post on my blog

Values

1 visual pixel will be this many on-screen pixels

Radius of the corner before scaling, same as CSS border-radius

Add a border around the outside

Width of the border before scaling

Note: Any void elements (e.g. img) will need to be wrapped in an element with the class pixel-corners--wrapper

Preview

100px x 50px

A pixel art image of a spaceship

150px x 75px

A pixel art image of a spaceship

300px x 150px

A pixel art image of a spaceship

600px x 300px

A pixel art image of a spaceship