Preview border-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 border-corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-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 border-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).

border-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: border-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 border-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!

  • http://floatboth.com MyFreeWeb

    Works great in Safari :-)

  • http://twitter.com/ijalfauzi Jang

    It should be great ! Thanks Lea :)

  • http://twitter.com/netsi1964 netsi1964

    Looks promising :-) I wonder, is there going to be support for custom shapes, perhaps using same syntax as you use on animation easing – like this one: cubic-bezier(.17,.67,.83,.67) – http://cubic-bezier.com/#.17,.67,.83,.67 Would be great! :-)

  • http://www.facebook.com/simplypixie Emma Davis

    Love it, thanks Lea – great fun to play with as well :)

  • http://twitter.com/kizmarh Roman Komarov

    Mmm, bevel with 50% radius! Or with something like 27%/50% etc!

    However, I hope browser engines would enhance support for border-radius. Right now there are so many bugs there, when it’s coming to shadows and borders with different widths. Hope adding those new tasty shapes would be not that hard for them.

  • Anthony Dillon

    Would be great to support bezier curves giving much more flexibility to shapes.

    Also would be great to sort out the anti-aliasing on rounded borders with shadows.

  • Pingback: Natori Women’s Understated Contour Underwire BraXclusivegirls Lingerie | Xclusivegirls Lingerie

  • toh

    Not sure to use this property. Anyway thanks for this nice app !

  • Pingback: border-corner-shape is in danger, and you can help! | Lea Verou

  • Pingback: Tweet Parade (no.13 Mar 2013) | gonzoblog

  • Robert Alan Yeatts Jr.

    Thank You! This will be very helpful!

  • http://www.yepiclip.com/ yepi

    Thanks for giving me the useful information. I think I need it. Thank you

  • Crispen Smith

    Any chance of making this a polyfill to support demonstration in the wild?

    For the time being I’m going to generate some SVGs from the app to add to a current project.

  • http://www.y8u.org/ Y8

    good form, what about the boder- radius is 10%? whether 15% is ok?

  • http://www.minecraftgames.info/ minecraft

    I agree.

  • namwe

    <ifr
    rrrarmr
    </rifrarmre

  • namwe

    <irfrrrarmre

  • namwe

    %253Ci%255Crf%255Crr%255Cra%255Crm%255Cre%253C%255Cr%2520%255Cri%255Crf%255Crr%255Cra%255Crm%255Cre%255Cr%253D%2522%2522%253E%253C%252fi%255Crf%255Crr%255Cra%255Crm%255Cre%253C%255Cr%253E

  • http://www.mercubuana.ac.id/ ryditya909

    nice info

  • Lars Linde

    I would have LOVED the scoop property when I implemented the danish TIVOLI site.Take a look at the shop pages… scoops everywhere (http://www.tivoli.dk/da/shop/)

  • http://www.friv2.org/Flappy_Bird.html flappy bird

    The story of lies. Both the doctor and the patient to be arrested for fraud for cheating the public.

  • Fred

    Do you have any idea why strokes behaves this way ? http://cl.ly/image/3V0G2U2c2z2W (thick corners, thin lines)

  • Frivchannel

    It should be great ! Thanks Lea :)