How Can I Make Text Wrap Around a Rounded Div?

Enhancing Rounded Div to Contain Text

Many projects require a rounded div to seamlessly contain text. However, by default, round divs often leave text appearing square-shaped. CSS offers solutions to address this issue.

Shape-Outside: A Modern Approach

The shape-outside property allows for wrapping inline content around non-rectangular shapes. It enables designers to customize wrapping, including around complex objects and circles. Browser support for shape-outside should be considered.

Gradient and Pseudo-Element Technique

A combination of radial gradients and pseudo-elements can create a circle-shaped area that repels text. Start with a square box and use four floating pseudo-elements with radial gradients drawn outside the circle's center. Adjust the gradients to cover the necessary areas.

For instance, the following CSS and HTML code achieves the desired effect:

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

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

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

<div>
  <div class="shape"></div>
  <div class="shape">

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