Preview corner-shape, before implementations!

As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is corner-shape. Whil…


This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of corner-shape, it will be able to do so much more! Beveled corners, scoop-style corners (informally known as “negative border-radius”), even rectangular notches.

Unfortunately, until it’s implemented in browsers, it’s hard to play with it. Or, is it? I spent the weekend creating an app in which you can enter values for corner-shape, border-radius, width, and height, and see the result, simulated through SVG, as well as the fallback in browsers that don’t support border-corner-radius (which is currently all browsers).

corner-shape preview

Obviously, it’s not a full preview, since you can only play with a limited subset of CSS properties, but it should be good for seeing the kinds of shapes that will be possible.You could also copy the generated SVG from the Developer tools of your browser, and use it as a background in any website!

Use it here: corner-shape preview

Tested to work in at least Chrome, IE9, Firefox, Safari and theoretically, should work in any SVG-enabled browser.

Enjoy! Hope you like it.

Important: Please note that corner-shape is still at a very early stage and might completely change before implementations. You can also help to make it better: Play with it and comment on what you think about its naming and functionality!


This content originally appeared on Lea Verou’s blog and was authored by Lea Verou


Print Share Comment Cite Upload Translate Updates
APA

Lea Verou | Sciencx (2013-03-24T00:00:00+00:00) Preview corner-shape, before implementations!. Retrieved from https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/

MLA
" » Preview corner-shape, before implementations!." Lea Verou | Sciencx - Sunday March 24, 2013, https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/
HARVARD
Lea Verou | Sciencx Sunday March 24, 2013 » Preview corner-shape, before implementations!., viewed ,<https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/>
VANCOUVER
Lea Verou | Sciencx - » Preview corner-shape, before implementations!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/
CHICAGO
" » Preview corner-shape, before implementations!." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/
IEEE
" » Preview corner-shape, before implementations!." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/. [Accessed: ]
rf:citation
» Preview corner-shape, before implementations! | Lea Verou | Sciencx | https://www.scien.cx/2013/03/24/preview-corner-shape-before-implementations/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.