CSS circle() function (original) (raw)

Last Updated : 05 Jul, 2023

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

Syntax:

circle(100px at 10px 150px);

or

circle( percentage );

Parameters: This function accepts a single parameter length or percentage which is used to hold the value of radius. It is a mandatory parameter.

Return value: It makes the text circular as the user wants.

Example 1: With the percentage procedure, we will proceed.

html

<!DOCTYPE html>

< html >

< head >

`` < title >

`` CSS circle() function

`` </ title >

`` < style >

`` div {

`` float: left;

`` width: 185px;

`` height: 185px;

`` shape-outside: circle();

`` }

`` img {

`` border-radius: 50%;

`` }

`` h1,

`` h4 {

`` text-align: center;

`` }

`` h1 {

`` color: green;

`` }

`` </ style >

</ head >

< body >

`` < h1 >GeeksforGeeks</ h1 >

`` < h4 >CSS | circle() function</ h4 >

`` < div >

`` < img src =

`` alt = "Sample image" >

`` </ div >

`` < p >

`` How many times were you frustrated while looking out

`` for a good collection of programming/algorithm/interview

`` questions? What did you expect and what did you get?

`` This portal has been created to provide well written,

`` well thought and well explained solutions for selected

`` questions. An IIT Roorkee alumnus and founder of

`` GeeksforGeeks. He loves to solve programming problems

`` in most efficient ways. Apart from GeeksforGeeks, he

`` has worked with DE Shaw and Co. as a software developer

`` and JIIT Noida as an assistant professor.It is a good

`` platform to learn programming. It is an educational

`` website. Prepare for the Recruitment drive of product

`` based companies like Microsoft, Amazon, Adobe etc with

`` a free online placement preparation course.

`` </ p >

</ body >

</ html >

Output:

Example 2:

html

<!DOCTYPE html>

< html >

< head >

`` < title >

`` CSS circle() function

`` </ title >

`` < style >

`` div {

`` float: left;

`` width: 200px;

`` height: 200px;

`` shape-outside: circle(135px at 55px 50px);

`` }

`` img {

`` border-radius: 0px 10px 130px 0px;

`` }

`` h1,

`` h4 {

`` text-align: center;

`` }

`` h1 {

`` color: green;

`` }

`` </ style >

</ head >

< body >

`` < h1 >GeeksforGeeks</ h1 >

`` < h4 >CSS | circle() function</ h4 >

`` < div >

`` < img src =

`` alt = "Sample image" >

`` </ div >

`` < p >

`` How many times were you frustrated while looking out for a

`` good collection of programming/algorithm/interview questions?

`` What did you expect and what did you get? This portal has

`` been created to provide well written, well thought and well

`` explained solutions for selected questions. An IIT Roorkee

`` alumnus and founder of GeeksforGeeks. He loves to solve

`` programming problems in most efficient ways. Apart from

`` GeeksforGeeks, he has worked with DE Shaw and Co. as a

`` software developer and JIIT Noida as an assistant professor.

`` It is a good platform to learn programming. It is an educational

`` website. Prepare for the Recruitment drive of product based

`` companies like Microsoft, Amazon, Adobe etc with a free online

`` placement preparation course.

`` </ p >

</ body >

</ html >

Output:

Supported browser: The browser supported by CSS | circle() Function are listed below: