1
00:00:00,120 --> 00:00:04,290
In this lecture we'll explore how to add borders around an element.

2
00:00:04,380 --> 00:00:08,700
We'll start by creating a class with commonly used border style declarations

3
00:00:15,170 --> 00:00:16,730
we'll call this class my border

4
00:00:30,550 --> 00:00:36,540
the first declaration border is used to specify where the border will be applied and at what thickness

5
00:00:37,380 --> 00:00:40,790
the thickness is stated in pixels at the moment.

6
00:00:40,890 --> 00:00:42,780
We have a four pixel thick border

7
00:00:46,030 --> 00:00:48,540
for a border only at the top of an element.

8
00:00:48,730 --> 00:00:56,680
We would use the border top declaration border bottom border right in border left are also other values

9
00:00:56,680 --> 00:01:00,480
that can be used if we leave it is just border.

10
00:01:00,480 --> 00:01:06,000
As we have known the border will be applied to all four sides.

11
00:01:06,010 --> 00:01:08,220
Next we have the border color.

12
00:01:08,260 --> 00:01:10,670
This will be the color of the border itself.

13
00:01:10,810 --> 00:01:20,820
The color value can be represented by a color name such as red green or blue hexadecimal no as we currently

14
00:01:20,820 --> 00:01:27,030
have or an RG b value.

15
00:01:27,050 --> 00:01:33,600
We also have a we can also create a border style using the border style declaration.

16
00:01:33,610 --> 00:01:39,940
There are several possible styles at the moment we've used dashed which will create a dashed line border

17
00:01:39,940 --> 00:01:42,710
effect.

18
00:01:42,800 --> 00:01:46,670
Let's go ahead and apply this class to one of our paragraphs

19
00:01:50,930 --> 00:01:52,570
will apply it to the first paragraph.

20
00:01:53,440 --> 00:01:58,740
So make a space after your first class and paste the second.

21
00:01:58,740 --> 00:02:03,960
My border will save or file and preview it in our browser

22
00:02:10,340 --> 00:02:12,440
so here we can see we have the dashed border

23
00:02:15,080 --> 00:02:17,180
which has been applied to the first paragraph.