From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Cropping images to a perfect circle
From the course: CSS: Images
Cropping images to a perfect circle
- [Instructor] Every time I demonstrate how to use border-radius to create rounded corners on an image, the very first question I get is, can I use this to create a perfect circle that is responsive? The answer is yes, but we have to employ that perfect square hack from the previous chapter to do so. You see, to create a responsive perfect circle, you have to set the border-radius to a percentage value. So if you want the circle to be perfect, you need to set it to 50% because that way each corner has a radius 50% the width or height of the box. The problem is if the image isn't square to begin with, you get this ellipsis, an oblong egg shape instead of a circle, which is not what you want. To fix this, we need to employ that technique that we covered earlier on in the course, the one where we hack the HTML and CSS to create a perfect square that's responsive. So I'll take border-radius away here, then I'll go and…
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.
Contents
-
-
-
-
Rounded corners with border-radius3m 23s
-
(Locked)
Cropping images to a perfect circle2m 37s
-
(Locked)
Custom shapes using clip-path44s
-
(Locked)
Clip-path: Circle3m 2s
-
(Locked)
Clip-path: Ellipse1m 36s
-
(Locked)
Clip-path: Polygon4m 33s
-
(Locked)
Clip-path: Inset2m 6s
-
(Locked)
Clip-path: Path2m 50s
-
(Locked)
Custom shapes using SVG4m 51s
-
(Locked)
Masking an image with another image2m 38s
-
(Locked)
Image text1m 48s
-
(Locked)
Browser compatibility3m 30s
-
-
-
-