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.

Circle style corners

Circle style corners - CSS Tutorial

From the course: CSS: Enhancing Website Graphics

Start my 1-month free trial

Circle style corners

- [Instructor] In the last video, I used CSS to add borders to the four sides of my page objects. In this video, I'm going to focus on the corners. Showing you some CSS styles to create rounded and elongated corners. Rounded corners can be added to any block element using the CSS border radius style. The length of the border radius can be expressed in one of the CSS units of measure. Or as a percentage of the width of the page element. The length value specifies the radii of hypothetical circles placed at each of the four corners. With the arc of the circle tracing out the curve that each corner will follow. Changing the border radius value changes the degree of curvature. A radius of zero shows no curvature, leaving the element as a square or rectangle. Increasing the border radius creates a more oval figure. If the object is a perfect square, setting the border radius of the corners to 50% or half of the width and height of that object will result in a border that is a perfect…

Contents