CSS Function -circle()

The circle() function, categorized as a <basic-shape> data type in CSS, is specifically designed to generate circular shapes and manage text wrapping around these shapes.

Possible Values

  • <shape-radius> - This can be expressed as <length>, <percentage> , or values such as closest-side and farthest-side.

    • closest-side - It uses the distance between the center of the shape and the nearest side of the reference box. In the case of circles, this refers to the nearest side in each dimension.

    • farthest-side - It uses the distance from the center of the shape to the farthest side of the reference box. In the context of circles, this refers to the nearest side in each dimension.

  • <position> - Moves the center of the circle, which can be specified as a <length>, <percentage>, or as a keyword such as left.

Syntax

circle() = circle( [<shape-radius>]? [at <position>]? )
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

CSS circle() - Text flow Around The Circle

In the following example, the function circle() is used to define a circle shape for the text flow around the circle.

  • The function sets a circle with a radius, creating a circular area around which the text content is wrapped.

  • This shape is also used as a clipping path to ensure that the content stays within the circular boundary.

<html>
<head>
<style>
   .circle-demo {
      width: 200px;
      height: 200px;
      background-color: #ebf21b;
      border-radius: 50%;
      float: left;
      margin-right: 25px;
      shape-outside: circle(45%);
      clip-path: circle();
   }
</style>
</head>
<body>
<div class="circle-demo"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum. <p>
</body>
</html>

CSS circle() - Positioning The Circle

The following example demonstrates positioning of text using circle() function.

  • Here the CSS shape-outside: circle(220px at 10px 80px); produces a circular shape at coordinates (10px, 80px) with a radius of 220 pixels.

  • This creates the visual appearance of text flowing around the stated circular border within the designated div element.

<html>
<head>
<style>
   div {  
      float: left;
      width: 300px;
      height: 250px;
      shape-outside: circle(220px at 10px 80px);
      background: lightgray;
   }
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum.<p>
</body>
</html>
Advertisements