I want text to wrap around curved borders

[WebWeWantBot]

---

title: I want text to wrap around curved borders
date: 2025-05-02T01:00:21.038Z
submitter: PRIVATE
number: 681419258d5473007ee1a5cc
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

You can make a div circular with 100% border-radius. But the text inside that div is not aware of the border-radius and continues to be a rectangle. Shaping text into a circle form requires two shape-outside elements, because there is no shape-inside OR built-in ability for text to respond to the actual shape of the div it's in. This is a real pain. What's the point of being able to make odd-shaped divs if you can't actually put anything inside of them?

---

If posted, this will appear at https://webwewant.fyi/wants/681419258d5473007ee1a5cc/

[bradisbell]

What you're looking for is easily handled by SVG and <textPath>.

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/textPath