Bi-axial border-radius Generator

Really? Who needs a border-radius generator? It’s SO SIMPLE!

Actually, it’s a little more complex than that – I saw a great talk a while ago (I really should have blogged it) where the presenter explained a little known feature of border-radius. She explained, with some style as I recall, how you can have different horizontal and vertical radii on a single corner.

Oh yeah – funky shapes ahoy!

Really, would you expect this to be a single HTML DOM element with standard CSS?

Aww, can’t see a fancy shape like some weird car side window? Grow up and get a decent browser. };p

However, it’s not as intuitive as a standard one value radius, so this generator from MDN helps to play around with the values until you get the shape you want.

MDN: Border-radius generator

 

[UPDATE 2018-10-17] Here’s a more modern version, with a nice interface, though the Mozilla version does have the ability to drag two points at once.

https://9elements.github.io/fancy-border-radius/

Leave a Reply

Your e-mail address will not be published. Required fields are marked *