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 - CSS Tutorial
From the course: CSS: Enhancing Website Graphics
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.