What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

[TIPS] Curving text along image boundary


New member
Different design approaches focus on space management on the web page. I often see one such requirement is placing an image with text around it. This gives a similar effect as shown in newspaper content. It is also used to give an attractive feel to the web page while not focusing much on the image. In a sense, the image is often not too relevant. As a beginner or experienced web developer, this becomes quite challenging if you start to code with text wrap and positioning elements (if that’s possible!).

One of the CSS tricks is to use the shape-outside property of CSS. It defines a shape and adjusts content adjacent to that image. If you target a rectangular image, you may easily do that with other properties. For circles and ellipses especially, shape-outside is a savior.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Position Absolute</title>
      .curved_text {
        shape-outside: circle(50%);
        width: 200px;
        height: 200px;
    <div class = "curved_text"></div>
<!-- Place content here →


shape-outside property of CSS

You can place any circular image like a balloon and curve the content around it. This CSS trick will surely help you build a solid design in a couple of lines of CSS codes in your next project.