From the course: CSS: Enhancing Website Graphics

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Ellipse style corners

Ellipse style corners - CSS Tutorial

From the course: CSS: Enhancing Website Graphics

Start my 1-month free trial

Ellipse style corners

“

- [Instructor] In the last video, I created elements with rounded corners. The corners need not be based on circles, they can also be based on ellipses. With rounded corners, we assume that the corners are formed from the arcs of a circle of a given radius, those arcs can also be created from ellipses, in which the horizontal radius differs from the vertical radius, as in this corner, in which the horizontal radius is 60 pixels and the vertical radius is 30 pixels. Elliptical corners are defined using the border radius style with the radius entered as two values. The first value is the horizontal radius followed by a forward slash and then, the vertical radius, as with rounded corners, the horizontal and vertical radius can be expressed in any of the CSS units of measure or as a percentage of the element's width and height. Once I set the horizontal and vertical radius values, they are applied to each of the four corners. To apply a different ellipse at each corner, I list all of the…

Contents