CSS | ellipse () Function - GeeksforGeeks

17 Jun, 2021
The ellipse() function is an inbuilt function in CSS which is used to create floating text around the ellipse shape picture or anything else. Syntax: 
circle(100px 10 px at 10px 150px);
or 
ellipse( percentage percentage );
Parameter: This function accepts single parameter length or percentage which is used to hold the value of radius. It is mandatory parameter.Return value: It makes the text ellipse as user want.Example 1: With percentage procedure we will proceed.  
html
<!DOCTYPE html><html> <head>    <title>        CSS | ellipse() function    </title>     <style>        div {            float: left;            width: 185px;            height: 185px;            shape-outside: ellipse();        }                 img {            border-radius: 0px 175px 175px 0px;        }                 h1,        h4 {            text-align: center;        }                 h1 {            color: green;        }    </style></head> <body>    <h1>GeeksforGeeks</h1>    <h4>CSS | ellipse() function</h4>    <div>        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"             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 | ellipse() function    </title>     <style>        h1 {            color: green;        }                 img {            -webkit-clip-path: ellipse(              farthest-side closest-side at 50px 100px);                       clip-path: ellipse(              farthest-side closest-side at 50px 100px);        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h4>CSS | ellipse() function</h4>        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"             alt="CSS ellipse function">    </center></body> </html>
Output:  
Supported Browsers: The browsers supported by CSS | ellipse () Function are listed below:  
Google Chrome
Microsoft Edge
Firefox
Safari
Opera
 
saurabh1990aror
CSS-Functions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript