Is there a way to make a circle box with a circle content?

Question

I'm wondering is there a simple way to make a circle filled with rounded text within the circle? I tried radius, but the text overflows the corners. It just behaves like there are no rounded corners. I'd like to do it with css and html only if it's possible. If not, I'm open to other ideas :)

Answer 1

I tried it at the beginning. Padding won't do anything good in this case, because I have a perfect circle instead of a square with rounded corners.

Ps How can I answer directly on someone's answer and not my own here? Is there a button or something? I can't see it ^ ^

Answer 2

This looks promising -- it appears to divide the text into spokes, then distributes them with rotations around a path:
https://css-tricks.com/set-text-on-a-circle/
A CSS path library: https://tympanus.net/Development/Arctext/
An interactive tool: http://csswarp.eleqtriq.com

Answer 3

I'm imagining "shape-outside" but inverted. Sadly, there is not currently a "shape-inside" CSS rule. Maybe upload an SVG of a rectangle with a circular hole and then use shape-outside: url(); to use the custom shape. Also found an example using shape-outside on 2 <div>s to flank either side of the text:
https://www.html5rocks.com/en/tutorials/shapes/getting-started/
If I ever get that idea to work, I'll post code.

Answer 4

try adding padding

Answer 5

p

Answer 6

what answer ??