Variation 7: border radius

- [Rik] variation number seven. So seven, we're gonna switch over to Mira's design. Mira has made happy flowers. And as you can see here, it's a very colorful design. Now, you might notice that some of these things have rounded corners on them like this, how do we actually go about adding that end? Well, the quick way is just export your images like this, but, generally you don't have any control after you've done it. So, I actually like to do this in CSS, of course.

So, if you notice up in figure at top corner, we have this 15. And if I just make this bigger and smaller, you might notice that this actually increases the border radius to zero, up to 15 was what millimeter. So, I need to add a border radius of 15 to all my images. So, going back to my code, I wanna pick all the images in projects, maybe I do these images, not just every image, just these particular ones. So, to pick these particular ones, what do I need to do? I need to go to my style sheet and underneath, let's say video in my section.projects on a pic, all the images, and what I wanna apply to that is some rounded corners.

Now in CSS to add rounded corners, we're gonna add a border-radius. And we're gonna tell it how much we wanna do 15. So now just by adding this end, we should get these as 15. Now I wanna add a little bit more to this. Now what we can do is start to increase that number if you wanna make it almost like a pill shape. So if you notice on this final one, that Jacqueline's done she has these rounded corners. Now, what I can do here is just keep increasing this number until all the corners are rounded.

So, just to prove that I'm gonna make it 150, 150 px, let's see how that looks. There we go. It's got 150 here, I wanna increase it even more to make it more of a pill shape, so maybe something like 350. Let's see how that looks, there we go. We can see that this is rounded to the point of it can't round anymore.

So, even if this is 500, this is still what it would look like you see here, we've got these rounded shapes, looks pretty good. And this obviously doesn't affect anything else, just the section.project the section with the class of projects, images. Now one thing to add in here is what if you don't want this to be perfectly round. I can add in something like 50%. So, 50% will do it in different directions, this is now an oval shape.

So, it depends on the thing that you're gonna do. Pixels will always do it based in the kind of like, the corner, percentage will do it based on the whole thing itself. So, there's two different ways of doing this. Generally, if you're doing just a rounded circle type shape or a pill shape, you'd use pixels, if you want something more of a kind of ellipse or oval shape, you'd use percent.