0:00
Hey guys, what's going on? You're watching CSF's Beginners Lesson 43 and today we're
0:12
going to talk about rounded corners. Now at first glance this may seem like a plug for
0:19
the net ninja Twitter, and it is, I'm not going to lie. However, I also wanted to show
0:24
you how Twitter uses this technique of rounded corners to get some really cool soft effects
0:30
for their elements. So we can see they use it all over the place. First of all here this
0:34
big icon, they've got some rounded corners on there, and up here in the search bar they've
0:39
got some big rounded corners there, and even these buttons here and the little icon there
0:44
So it's very common across the whole web you're going to see rounded corners everywhere just
0:49
to give that softer look. So I'm going to show you how to use it in this lesson, but
0:53
before we do that I just want to go over to caniuse.com, which I've shown you in a previous
0:58
lesson, and we come here to see if we can use certain CSS or CSS3 properties in modern
1:05
day browsers, just to make sure that every browser supports them. Now the way we use
1:10
this is by just putting the property name in the top here, so I'm going to say border
1:14
radius, this is what it's called. And we can see here that most things support it. If we
1:20
go back to IE8 it's not supported, but it's only got a global usage of less than 2%. And
1:27
over here Opera Mini, which has got a global usage of 4.71%. Wow, I didn't realise that
1:34
But either way, mainly across the board it's supported. Now this is one of those properties
1:39
where a while back we would have had to specify vendor prefixes to get it working across the
1:47
board. Now I'm not going to go into what vendor prefixes are now, I'll go into that later
1:52
on when we cover browser testing and things like that. But these days it's widely supported
1:59
so I just wanted to show you that here before we jump into the code. So we don't need to do vendor prefixes, we're just going to do the property on its own and see how it looks
2:07
in a browser. Alright then guys, so I'm back here in the code, and I'm starting off exactly
2:14
where I left off last time. So I've got these four div elements here, and we were working
2:18
with static and dynamic widths. So what we're going to do is just apply a border radius
2:23
to some of these. So we'll start off with this static width div here, and the property
2:29
name remember is border-radius. Now it has four sides, or four corners right, an element
2:38
We can control the top right, the bottom right, the bottom left, and the top left. And it
2:43
goes around in a clockwork fashion. So first of all, if we just specify one number, let's
2:49
say 10 pixels, that's going to apply a border radius of 10 pixels on every corner. And I'll
2:55
show you what that looks like in a browser. So I'm going to right click, show in explorer
3:00
and get this open in Chrome. So now here you can see this first one has rounded corners
3:08
all the way around, and that's a 10 pixel border radius. Now the higher the number
3:14
the more curved the border radius is going to look like. So let's just increase it to
3:18
30, and view it in a browser again. You can see now, more rounded. And if we carried on
3:27
I mean eventually we could go into a full circle if you want. And that's a pretty cool
3:31
technique. I'll show you that with one of the other elements. You can just make a circle
3:34
out of a square by using the border radius property. But for now, what I'm going to do
3:39
is go back into the HTML, and now we're going to control each corner separately. So I'm
3:46
going to say border-radius, and I'm going to say 5 pixels, 10 pixels, 20 pixels, and
3:56
40 pixels. So it's going to double each time around the clock. So let's view this in a
4:01
browser. Alright, so where are we? Now you can see here, the top left is a very small
4:10
curve here. That's where we start with the 5 pixels. Then if we zoom over to the right
4:14
here, it gets a little bit more curved. That's a 10 pixel border radius. Down below here
4:20
is a 20 pixel border radius. And right all the way over here, with this really curved
4:25
one here, this curved corner, that is a 40 pixel border radius. It kind of looks like
4:29
a boat, doesn't it? So that's how we can control each corner separately. Alright? And
4:36
it's the same with margin, whereby if we just said something like this, 10 pixels, 20 pixels
4:42
we'll save that and view it in a browser. Now you can see here, this one here is 10
4:50
pixels, top left. Bottom right is 10 pixels. Top right is 20 pixels, and bottom left is
5:00
20 pixels. So it works a little bit differently. There's still opposites. There's still opposites
5:05
remember? So top left, bottom right, top right, bottom left. Okay? So it's a little bit more
5:12
complicated and you just have to figure out which number controls what. But once you get
5:17
the hang of it, it's fairly easy. And to be honest, I just like specifying the four
5:21
different values for all different sides if I do something like this to avoid the confusion
5:26
Okay, so now let's do that whole circle thing. Right? So inline block, what I'm going to
5:32
do is take away those properties and give them a width of 100 pixels, and I'm going
5:38
to give them a height of 100 pixels. I'm going to give them a border radius all the way around
5:45
of 50 pixels. And let's view this in a browser. Ah, look at that. Now the circles, that is
5:55
pretty cool, no? So you can make some warning buttons or anything you like, get creative
6:00
with them by creating circles with initially rectangle elements. Obviously, this content
6:07
here is no longer within the confines of this gray color here, but we could use padding
6:12
and margin, etc., just to drop that down into the middle. So why do we use 50 pixels? Well
6:20
if you imagine the whole thing was a width of 100 pixels and we have a corner on the
6:26
top left and a corner on the top right, yeah? If each one of those has a border radius of
6:31
50 pixels, that means that that border radius is going to occupy 50% of that length. It's
6:38
going to occupy 50 pixels in length, yeah? Now the whole thing is 100 pixels in length
6:42
so if we've got two, the top left and the top right, both 50 pixels, they're going to meet in the middle and make a perfect circle. Same for the bottom, alright? So that is border
6:52
radius in a nutshell. If you have any questions about this, feel free to drop a comment down
6:56
below and I'll answer all of those. Otherwise, if you enjoy these videos, please like, subscribe
7:01
or even share them, and I'll see you guys in the next one
