How to Wrap Text Around a Rounded Div Using CSS?

How to Keep Text Inside Rounded Divs Using CSS

Wrapping text around a round div can be tricky, often resulting in squared-off text. This issue can be solved using various techniques:

Shape-Outside Property

Shape-outside is a modern CSS property that defines a shape for inline content to wrap around. By tailoring this shape, you can create rounded edges for your text. However, browser support for shape-outside is limited.

Background Gradient

Another approach is to use a radial-gradient background to create a circular shape. To achieve this, apply a radial gradient with transparency outside the desired circle, allowing text to flow freely within it. This technique requires four pseudo-elements to form the shape.

Pseudo-Element Solution

Similar to the background gradient method, this technique utilizes pseudo-elements to create a circle using radial gradients. However, instead of using transparency, the gradients are drawn outside the circle's perimeter, effectively pushing the text away from the edges.

Implementation

div:not([class]) {
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background: #333;
}

div[class]:before {
    content: '';
    float: left;
    clear: left;
    height: 5em;
    width: 5em;
    background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

/* ... Remaining pseudo-element styles and additional styling */

Note: Browser support for shape-outside is essential for using that technique.

The above is the detailed content of How to Wrap Text Around a Rounded Div Using CSS?. For more information, please follow other related articles on the PHP Chinese website!