Are CSS-Shapes a reality yet? [closed]

Question

I keep finding sites talking about CSS-Shapes; where the idea is that instead of rectangular I can use CSS to create texts that take a number of shapes such as circular. But the websites I find, have codes that do not work. And then when I look at their own source code (since they have the examples on their very website), it turns out all the examples they have are images -- as opposed to real code. So I am asking here. Is this CSS-Shape real yet? I want to render a text inside a semi-circle. That's how I discover about CSS-Shapes.

Answer 1

Yes and no. 'Real' CSS shapes are not supported by a wide range of browsers yet.

See http://caniuse.com/#feat=css-shapes

But a circle can also be made by adding rounded corners to an element, which is supported by all major browsers, including IE9.

See: http://caniuse.com/#feat=border-radius

So unless you need this to work in IE8 too, you can add text in a circle in pure CSS. And for IE8, the text will show just as well, only in a square or rectangle instead of a circle, so that might be an acceptable fallback for you.

You didn't name a specific website, but quite often, websites about web development will have articles about new features which may not (or not widely) be supported yet, which is also why they can have images to show what it will look like once it becomes available.

As Niet the Dark Absol pointed out in the comments, the border-radius solution doesn't actually wrap the text in a circle. The text will behave as if the element is still rectangular. If you need to make the text follow the circle shape, and need support for the current generation of browsers, you will need the help of JavaScript. The TextMorph library seems to do the trick. I just googled it, so I don't have experience with it, but it looks promesing.