All language subtitles for 079 Implementing Border-radius.en_US

And specifying border radius in CSS is actually

extremely easy. And so let's now go do that.

So all we need to do is to specify the border radius

property on some element.

So let's go, for example, to images

and apply a border radius to all of them.

So I'm actually going to select right here, all the images

and then border radius.

And so here, of course, we need to specify a length,

and let's just experiment with different values,

just so you get a sense for how much border radius

corresponds to a certain amount of pixels.

Like if we say two pixels,

then almost nothing is going to change.

So you'll see that here it is still

almost completely squared.

Now, if we use, like, 50 pixels,

then that will actually take away a lot of the corner here.

Right?

So that is 50 pixels, but now let's use something more

sensitive, like 12 pixels.

And so this looks a little bit nicer also because,

our typeface is actually quite boxy, so quite squared.

And so maybe we wouldn't even need any border radius at all

in this design,

but of course I still want to show it to you. And so yeah.

This project is mainly about actually showing you stuff.

So this image is here,

has now 12 pixels, and this one, and this one.

And so since we're already here,

let's not give this entire section here

a border radius as well.

So we have it here on the image 12 pixels.

And so to make this look nice,

we should give this section here

the exact same amount of border radius.

So remember that is 12 pixels.

So border radius.

So if we added something else, like 20 pixels,

then that would look kind of off.

Well, actually with 20, it wouldn't be so bad,

but let's say 30.

So now it looks weird because this radius here

is really a lot bigger.

And so that's why we make it the same also at 12 pixels.

So you'll see that now it looks quite consistent

and let's do the same here

since we're already down here as well with these cards.

So that is the chair box, probably it's the chair actually.

So a border radius of 12 pixel,

and you see down here, we have that border radius.

However, now this looks kind of strange here

because we have the border radius,

not only on the card here, but we also have it in

these two corners of the image, right?

So we want it here in the top, but not at the bottom.

And so we can actually control individual corners also

using CSS.

So let's basically take away the border radius here

in this corner and in this one.

So let's select the chair,

and then the image that's inside of that.

So we're using a child selector again,

selecting the chair element,

which has all of this and then, in there the image,

which is this element here.

So remember that the image itself has a border radius of 12,

and now we can selectively turn off one corner.

So bottom and then left radius

and let's set it to zero, and it's gone.

Right?

And so this is actually how you would also style a button

like those creative buttons that

I showed you in the last lecture.

So where one corner looks like this: completely squared,

and then the other three ones are round.

But here that's not what we're looking for.

We also want the other one to be zero.

So just like this, right?

So that looks nice and round.

And now all we need to fix is these buttons.

So this one and this one.

And what we want to do with these

is to actually make them completely round.

So basically like this here.

So where is that?

Right here.

So border radius.

So, again, here we don't want this,

which of course would still not look bad,

but now I want to show you how we can actually make this

really rounded.

Now there are two ways of doing this,

but one only works if the element is a square.

So if the element is a square, to make it round,

we give it a border radius of 50% like this.

However, since this is not a square,

it will then turn into this, like, oval.

And so that is not what we want.

And so, and so instead in a situation like this,

what we need to do is to simply specify

a really big value here.

So as long as it's taller than the element is tall,

we will be fine.

So we can, for example, use 100 pixels.

And so now that's the result.

But we could also use, like, 1,000 pixels

and it wouldn't change anything.

It just cannot be less than the height.

So like this, it wouldn't work.

Like this, now, maybe we're already there,

but to play it safe, I like to use a really big value here.

So that should have fixed it here.

And also down there, since that is using

the same class of button.

All right, so this nice little design

is starting to look really great, I think.

Now one thing that we still need to fix

is all the spacing that we have here on the page.

So there's not enough white space here,

which really makes it that there is a lack of

visual hierarchy also on the page.

And so that's what we're going to learn about

in the next two videos.

So that then we can come back and fix that here

in our design.