WEBVTT FILE





1
00:00:06.170 --> 00:00:13.200
in this video we can learn how to asset borders for HTML elements we're gonna

2
00:00:13.200 --> 00:00:17.699
start with the Facebook div but before we do that we can i define a background

3
00:00:17.699 --> 00:00:22.859
color for paragraphs so that we can see how everything is laid out so let's

4
00:00:22.859 --> 00:00:28.710
choose a color the background color for paragraphs and by using ctrl alt K we

5
00:00:28.710 --> 00:00:37.879
can use our color picker and let's go for let's go for these color phrases

6
00:00:37.879 --> 00:00:42.360
okay now we can see everything can see the contents of the div and we can see

7
00:00:42.360 --> 00:00:47.640
the padding and now we're gonna be defining the border okay so if we start

8
00:00:47.640 --> 00:00:51.780
with the Facebook div basically there are several ways of defining borders the

9
00:00:51.780 --> 00:00:56.699
first one is by using one line where we define everything both the width the

10
00:00:56.699 --> 00:01:04.979
style and the color if we want to so the syntax is border and now we're gonna

11
00:01:04.979 --> 00:01:12.600
define the width using one value okay and then we can define the style so

12
00:01:12.600 --> 00:01:18.900
we're gonna use a rich style now you can see that the border is already sets we

13
00:01:18.900 --> 00:01:23.369
haven't used any color but by default this gray color is the one that's used

14
00:01:23.369 --> 00:01:27.360
and usually if you want to choose a color it's gonna be the second parameter

15
00:01:27.360 --> 00:01:33.810
that we need to put after the width and let's pick up a certain color for our

16
00:01:33.810 --> 00:01:42.170
folder let's go for something like this and now you can see the border with the

17
00:01:45.690 --> 00:01:51.300
chosen color okay so that's one way of defining the parameters of Modi's now if

18
00:01:51.300 --> 00:01:56.340
you move to the Apple Dave so we're going to use another way first of all

19
00:01:56.340 --> 00:02:01.320
we're gonna define the border width using four values and that's if we want

20
00:02:01.320 --> 00:02:12.090
to set one different value for each side so the syntax is border width and we are

21
00:02:12.090 --> 00:02:15.200
going to choose different values for each side so we're starting with the top

22
00:02:15.200 --> 00:02:21.630
side followed by the right one then the left one sorry the bottom one and then

23
00:02:21.630 --> 00:02:27.410
the bottom one and then the left one okay so we don't see anything yet

24
00:02:30.450 --> 00:02:35.940
because we haven't defined any style now if we define the border color and you

25
00:02:35.940 --> 00:02:42.959
can do exactly the same so for the color and we can use a different color for

26
00:02:42.959 --> 00:02:55.709
each side so let's go black green orange you know so you can see that we don't

27
00:02:55.709 --> 00:03:00.690
see anything yet so far because we haven't defined any style yet so once we

28
00:03:00.690 --> 00:03:06.600
define the style using border style then we're gonna see the border so let's

29
00:03:06.600 --> 00:03:12.360
go for rich again and now you can see the border okay and you can see the

30
00:03:12.360 --> 00:03:17.970
different colors for the different widths for each side okay now let's move

31
00:03:17.970 --> 00:03:29.370
to the Microsoft div and now we're gonna define the border width using only two

32
00:03:29.370 --> 00:03:35.519
values and in this case the first value is gonna define the border for the top

33
00:03:35.519 --> 00:03:39.959
and bottom sides and then the second one is gonna define the value for the right

34
00:03:39.959 --> 00:03:46.270
and left side okay let's use a border style

35
00:03:46.270 --> 00:04:00.170
and this time let's go for a groove style okay and let's choose a color okay

36
00:04:00.170 --> 00:04:09.760
let's go for okay let's pick up a color from here all right

37
00:04:09.760 --> 00:04:18.070
there is another parameter that we can use is the it's the border radius and

38
00:04:20.709 --> 00:04:28.820
basically the border radius will make the corners curved basically so if we

39
00:04:28.820 --> 00:04:34.880
set it to 10 pixels for instance so you can see now that's the borders are

40
00:04:34.880 --> 00:04:39.860
curved and the bigger the radius is the more curved to be a corners are going to

41
00:04:39.860 --> 00:04:49.130
be so if we set that to 20 pixels 30 pixels 40 will change accordingly now if

42
00:04:49.130 --> 00:04:59.180
we set the height and the width to 100 pixels for instance and we increase the

43
00:04:59.180 --> 00:05:09.770
border radius let's go to 80 pixels and also if we change the padding and we set

44
00:05:09.770 --> 00:05:17.419
it to 10 pixels for all sides now we start getting a circle okay and if we

45
00:05:17.419 --> 00:05:22.100
want the border radius to be a border width to be the same for all sides then

46
00:05:22.100 --> 00:05:29.479
we can have a more uniform a circle all right so this is one way of changing a

47
00:05:29.479 --> 00:05:36.710
div to a circle this is for borders in the next video you're going to move to

48
00:05:36.710 --> 00:05:39.280
the outlines you