- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Function - ellipse()
An ellipse can be thought of as a distorted circle, and the CSS ellipse() function works similarly to the circle() function.
However in the case of ellipse(), both the horizontal (x) and vertical (y) radius must be specified.
Possible Values
<shape-radius> - Two radii, x and y, are required in this sequence. These values can be specified as <length>, <percentage>, or with keywords such as closest-side and farthest-side.
closest-side - Uses the distance between the center of the shape and the closest side of the reference box. In the case of ellipses, this refers to the closest side along the radius dimension.
farthest-side - Uses the distance from the center of the shape to the outermost side of the reference box. In the context of ellipses, this refers to the farthest side.
<position> - Moves the center of the ellipse. Can be a <length>, <percentage> or a keyword such as left and right. If nothing is specified, the <position> is set to the center point by default.
Syntax
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? ) <shape-radius> = <length> | <percentage> | closest-side | farthest-side
CSS ellipse() - Basic Example
The following example demonstrates the working of ellipse() with shape-outside property.
<html> <head> <style> .ellipse-container { float: left; width: 280px; height: 250px; shape-outside: ellipse(45% 40%); background: lightblue; } </style> </head> <body> <div class="ellipse-container"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Nullam viverra suscipit massa, sit amet lobortis quam sollicitudin sed. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur.</p> </body> </html>
CSS ellipse() - Positioning The Ellipse
In the following example, the ellipse() CSS function is used to create an ellipse using the clip-path and shape-outside properties.
<html> <head> <style> .ellipse-demo { width: 300px; height: 200px; text-align: center; font-size:15px; background-color: lightgray; clip-path: ellipse(50% 50% at 50% 50%); shape-outside: ellipse(100% 60% at left); float: left; margin-right: 20px; } .content { margin-top: 20px; } </style> </head> <body> <h1>Elliptical Text Wrapping Example</h1> <div class="ellipse-demo"></div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at lectus augue. Sed vel semper libero. Integernec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p> <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google