circle() CSS Function


The circle() CSS function is an inbuilt function in CSS which is used to create floating text around the circular shape picture or anything else. The circle() function is part of the CSS Shapes module.


circle() = circle( <shape-radius>? [ at <position> ]? ) 


  • shape-radiusspecifies the radius of the circle. It can be set in absolute lengths or percentages. A percentage value here is resolved from the used width and height of the reference box. Negative values are not allowed.
  • positionThe position argument defines the center of the circle. This defaults to center if omitted.


<div class='circle'></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
.circle { 
float: left;
width: 150px;
height: 125px;
shape-outside: circle();

Browser Support

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 1st December 2019