1
00:00:00,730 --> 00:00:04,400
CSS also has properties that let us create
rounded corners on

2
00:00:04,400 --> 00:00:07,660
elements without the need for any images
or extra markup.

3
00:00:07,660 --> 00:00:11,836
With the border-radius properties we can
easily define exactly how

4
00:00:11,836 --> 00:00:14,070
rounded the borders appear.

5
00:00:14,070 --> 00:00:18,750
So this time, we want to apply rounded
corners to our Wildlife div.

6
00:00:18,750 --> 00:00:21,110
As well as the images on the page.

7
00:00:21,110 --> 00:00:23,620
So, let's go back to our style sheet and
again,

8
00:00:23,620 --> 00:00:27,500
underneath the Layout Styles, let's scroll
down to the wildlife rule.

9
00:00:28,610 --> 00:00:31,590
So, first let's apply the rounded corners
to

10
00:00:31,590 --> 00:00:35,360
each individual corner of our Wildlife
div.

11
00:00:35,360 --> 00:00:38,970
Because we're also able to specify custom
border-radius values for

12
00:00:38,970 --> 00:00:40,582
each corner of an element.

13
00:00:40,582 --> 00:00:44,450
The border-radius property is actually the
shorthand property for

14
00:00:44,450 --> 00:00:46,520
four separate values.

15
00:00:46,520 --> 00:00:53,160
So first, let's type
border-top-left-radius.

16
00:00:53,160 --> 00:00:55,133
And next,

17
00:00:55,133 --> 00:01:03,471
let's type border-top-right-radius.

18
00:01:03,471 --> 00:01:11,342
Followed by border-bottom-right-radius.

19
00:01:11,342 --> 00:01:16,145
And finally, border-bottom-left-radius.

20
00:01:16,145 --> 00:01:18,455
[BLANK_AUDIO]

21
00:01:18,455 --> 00:01:22,780
So again, here we're adding a border
radius property for

22
00:01:22,780 --> 00:01:24,550
each corner of our div.

23
00:01:24,550 --> 00:01:28,620
So now, let's assign a value to each of
those four corners.

24
00:01:28,620 --> 00:01:32,465
The border values we assigned can be any
length unit, or a percentage.

25
00:01:32,465 --> 00:01:36,630
So first, we're going to set our
border-radius with pixel units.

26
00:01:36,630 --> 00:01:42,138
So, let's set the border top left radius
value to 50px.

27
00:01:42,138 --> 00:01:47,176
And let's set the top right radius value
to 10px.

28
00:01:47,176 --> 00:01:52,443
And we're also gonna set the bottom right
radius to 50px,

29
00:01:52,443 --> 00:01:55,756
and the bottom left radius to 10px.

30
00:01:55,756 --> 00:01:57,857
[SOUND] All right, so let's save our style
sheet.

31
00:01:57,857 --> 00:02:01,572
Go back to the browser, and when we
refresh the page,

32
00:02:01,572 --> 00:02:06,529
notice how the top left corner has a wider
border radius of 50 pixels,

33
00:02:06,529 --> 00:02:10,700
while the top right radius is smaller at
10 pixels.

34
00:02:10,700 --> 00:02:11,550
Then, once again,

35
00:02:11,550 --> 00:02:17,800
we have a 50 pixel bottom right radius and
a 10 pixel bottom left radius.

36
00:02:17,800 --> 00:02:23,460
And notice how the top border styles also
follows the curve of the border-radius,

37
00:02:23,460 --> 00:02:24,730
as all border styles will.

38
00:02:25,810 --> 00:02:29,074
Now if we don't want to type all these
values individually,

39
00:02:29,074 --> 00:02:33,624
like most CSS properties, there is also a
shorthand property for border-radius.

40
00:02:33,624 --> 00:02:37,235
And most of the time, this is the property
we're gonna use in a project.

41
00:02:37,235 --> 00:02:40,511
So instead of writing the four separate
declarations,

42
00:02:40,511 --> 00:02:43,377
we can simply use the border-radius
property.

43
00:02:44,430 --> 00:02:49,050
And the order values in the border-radius
shorthand property also follows that

44
00:02:49,050 --> 00:02:53,680
same clockwise order used for the padding
and margin shorthand values.

45
00:02:54,750 --> 00:02:59,440
So the first value applies to the top left
corner, so let's again make it 50 px.

46
00:02:59,440 --> 00:03:01,740
And the next one applies to the top right
corner.

47
00:03:01,740 --> 00:03:04,430
We're gonna make this one ten px.

48
00:03:04,430 --> 00:03:08,210
And the next value applies to the bottom
right border,

49
00:03:08,210 --> 00:03:10,380
which we'll again set to 50px.

50
00:03:10,380 --> 00:03:14,690
And finally, the fourth value is applied
to the bottom left border,

51
00:03:14,690 --> 00:03:16,755
which we'll again make 10px.

52
00:03:18,210 --> 00:03:21,103
And once again, everything should still
look exactly the same way.

53
00:03:21,103 --> 00:03:21,975
Which it does,

54
00:03:21,975 --> 00:03:26,548
we're just now defining it with the handy
border-radius short hand property.

55
00:03:26,548 --> 00:03:31,073
And we could actually shorten this value
even further, since the top left and

56
00:03:31,073 --> 00:03:34,276
bottom right values are the same, and the
top right and

57
00:03:34,276 --> 00:03:36,521
bottom left values are also the same.

58
00:03:36,521 --> 00:03:41,727
So instead of the four units, we can
actually shorten

59
00:03:41,727 --> 00:03:47,900
this down to 50px and 10px, and nothing
changes.

60
00:03:47,900 --> 00:03:50,480
And if we want to set an even
border-radius for

61
00:03:50,480 --> 00:03:54,910
each side of our div, we'll simply need to
define one value.

62
00:03:54,910 --> 00:03:57,097
So instead of these two values,

63
00:03:57,097 --> 00:04:01,820
let's define an all around border-radius
value of 25 px.

64
00:04:01,820 --> 00:04:03,890
So when we take a look at it again,

65
00:04:03,890 --> 00:04:08,400
you can see how each side has a 25 pixel
border-radius.

66
00:04:08,400 --> 00:04:12,730
Again, this is probably the most common
way you'll use the border-radius property.

67
00:04:12,730 --> 00:04:17,670
You'll only use one value to set an even
border-radius all around.

68
00:04:17,670 --> 00:04:20,430
Like most values that accept a length
unit,

69
00:04:20,430 --> 00:04:25,250
we're also able to define a border-radius
using Ms and percentage units.

70
00:04:25,250 --> 00:04:28,135
But keep in mind that when we use a
percentage unit for

71
00:04:28,135 --> 00:04:33,250
border-radius, the percentage value refers
to the dimensions of the element.

72
00:04:33,250 --> 00:04:41,032
So if we change the border top left and
border bottom right values to 100%,

73
00:04:41,032 --> 00:04:44,928
notice how the rounded corner takes up

74
00:04:44,928 --> 00:04:50,390
100% of the top left and bottom right
corners of our div.

75
00:04:50,390 --> 00:04:51,385
So as we can see,

76
00:04:51,385 --> 00:04:54,930
border-radius with percentages can create
some interesting shapes.

77
00:04:54,930 --> 00:04:58,280
So for instance, we'll go back to our
border-radius value.

78
00:04:58,280 --> 00:05:02,230
And let's give it an all around
border-radius value of 50%.

79
00:05:02,230 --> 00:05:03,870
So when we save our style sheet and

80
00:05:03,870 --> 00:05:09,590
refresh the page, notice how the result is
an oval-shaped border-radius all around.

81
00:05:09,590 --> 00:05:13,180
And if we want to create a perfectly round
circle, well the width and

82
00:05:13,180 --> 00:05:15,520
the height of the element need to be the
same.

83
00:05:15,520 --> 00:05:21,620
So for instance, let's add a width value
of 500px.

84
00:05:21,620 --> 00:05:25,890
And let's add a height value of 500px as
well.

85
00:05:25,890 --> 00:05:28,150
And we'll keep the border-radius at 50%.

86
00:05:28,150 --> 00:05:29,440
So, when we go back and

87
00:05:29,440 --> 00:05:34,358
take a look, we can see that the result is
a circle-shaped div.

88
00:05:34,358 --> 00:05:38,690
Now, border-radius 50% is also commonly
used to

89
00:05:38,690 --> 00:05:41,778
create rounded images in our design.

90
00:05:41,778 --> 00:05:45,748
We can do it with CSS without having to
rely on an image editor, like Photoshop.

91
00:05:45,748 --> 00:05:50,845
So for instance, I'll scroll up to the
image rule in our style sheet.

92
00:05:50,845 --> 00:05:57,204
And I'll paste in the border-radius 50%
declaration, and when we refresh the page,

93
00:05:57,204 --> 00:06:01,820
notice how our images take on that
circular or elliptical shape.

94
00:06:02,830 --> 00:06:05,040
But this doesn't really fit our design.

95
00:06:05,040 --> 00:06:12,350
So moving forward, let's set a smaller
border-radius of 10 pixels for our images.

96
00:06:12,350 --> 00:06:17,270
So we're gonna change the value from 50%
to 10px, and let's scroll down and

97
00:06:17,270 --> 00:06:19,100
do the same for our wildlife div.

98
00:06:20,310 --> 00:06:23,620
So, down in our layout styles in the
wildlife rule,

99
00:06:23,620 --> 00:06:26,710
we're going to remove the width and height
styles.

100
00:06:26,710 --> 00:06:31,390
And let's set the border-radius to 10px.

101
00:06:31,390 --> 00:06:32,250
Right, so let's take a look.

102
00:06:34,350 --> 00:06:37,470
I think that looks much better, so let's
stick with this moving forward.