Rounded corners with border-radius

- [Instructor] In the previous chapter, we looked at how to size and position images within boxes. In this chapter, we'll look at how to change the box itself to change the shape of the image, so it's no longer just a rectangle or a square, but it can turn into something else. The first example is using border radius. Now the name Border Radius makes it sound like you are dealing with a border of the box. You're actually dealing with a border box. So you're changing the shape of the box to have rounded corners. The border radius property can be used on any container, and we're going to use it on the image container here. So I'll select the image, and say "border radius", and then set it to, let's say 2rem. When border radius is defined like this, with one value, it applies to all four corners of the box. And as you can see, it creates a radius on the corner of 2rems. We can then change this value, by turning it up or down. And you'll notice when we get to a border radius that is the size of the box itself, in this case, the height, it stops changing. So even though I keep increasing the size here, the roundedness of the corner does not change. That's because we're currently using a fixed value, and the fixed value can't be higher than the actual radius can be. However, if we set it to a percentage value, so let's say 50%, you can see it's now 50% of either the height or the width, and as a result we get this oblong ellipsis instead of a circle. Now, the interesting thing about border radius is you can actually apply a border radius to each individual corner, starting from the top left and then going around in a circle. So I can say 50% for the first corner, then nothing for the second corner, and because of how CSS is truncated, if I just say 50% and then zero, we get 50%, zero, 50%, zero. So we get this weird leaf-like shape, which was kind of interesting. We can do this with any value, so I can also set it to something like 10rem 0, and then 5rem and 20 rem. We've got this even weirder shape, where you can really shape the box to be anything you want. So you can apply a border radius to any image and create a new shape using rounded corners. But you can only do rounded corners with this function. One more thing, you can choose to apply border radius to the containing element in steps. If I scroll one level up here, there's an article that wraps around this image, and I can apply a border radius to this article as well. I'll set it again to 20rem, and you can see, nothing happened. I mentioned this earlier in the previous chapter. It's because although we have changed the shape of the box that contains the image, the image is spilling outside of the box. It's overflowing the box. To fix this problem, we then need to set overflow to hidden, and this will then hide anything that spills outside the box, and again, we get this border radius shape. So here you have a choice. You can either change the shape of the image itself, or you can change the shape of the overall container that holds the image, and then set overflow hidden to ensure that the image doesn't spill out. Either way, you have complete control over the corners if you want them to be circular, using border radius.