1 00:00:00,770 --> 00:00:02,980 Hello everyone and welcome back. 2 00:00:03,080 --> 00:00:08,330 In today's video we will learn how to our borders to extremist elements using fuses. 3 00:00:08,850 --> 00:00:14,430 CSX provides us with properties to add and customize borders for its dismal elements. 4 00:00:14,450 --> 00:00:17,680 Let's try these properties with examples to understand them better. 5 00:00:18,900 --> 00:00:21,140 Say we want to our border to this paragraph. 6 00:00:21,960 --> 00:00:22,620 Let's give a try. 7 00:00:22,620 --> 00:00:24,300 So let's bring up our good editor. 8 00:00:24,900 --> 00:00:26,590 So it was the second paragraph. 9 00:00:26,790 --> 00:00:28,560 So let's give it an idea. 10 00:00:28,590 --> 00:00:32,260 Say second row. 11 00:00:32,710 --> 00:00:33,310 Let's say that. 12 00:00:33,310 --> 00:00:35,530 Coming back to a index let's see assess. 13 00:00:36,430 --> 00:00:41,710 And because it's an idea so hash and the name of the second Barrow. 14 00:00:42,340 --> 00:00:43,870 So you define a border. 15 00:00:44,110 --> 00:00:45,950 You need two values. 16 00:00:45,970 --> 00:00:54,280 So first we need the border style this accepts many values so we can use the values a dotted dashed 17 00:00:54,430 --> 00:00:57,690 solid double et cetera et cetera. 18 00:00:57,700 --> 00:01:07,490 So let's start with dotted then we need to define the border with say border would see what it says 19 00:01:08,630 --> 00:01:10,150 and then we need to define the border. 20 00:01:13,480 --> 00:01:16,970 See Red let's save it. 21 00:01:17,650 --> 00:01:21,770 Let's bring up our editor here. 22 00:01:21,830 --> 00:01:25,620 And as you can see our bar graph has adopted border. 23 00:01:25,970 --> 00:01:31,750 Let's zoom into it let's try and using the border with say two pixels. 24 00:01:32,110 --> 00:01:34,770 And as you can see these dots are a bit taken up. 25 00:01:35,370 --> 00:01:38,580 Let's make them say six pixels. 26 00:01:38,760 --> 00:01:41,220 And now as you can see these dots are even bigger. 27 00:01:42,030 --> 00:01:43,470 So we don't want it to be dotted. 28 00:01:44,370 --> 00:01:47,230 Let's try another option so we have got dashed here. 29 00:01:47,540 --> 00:01:49,210 Let's see the. 30 00:01:49,340 --> 00:01:52,090 And as you can see our borders are now dashed. 31 00:01:52,990 --> 00:01:55,560 You've got another option solid. 32 00:01:56,080 --> 00:02:02,310 So we've got the solid line as a border around the biggest similarly if we don't want anybody we could 33 00:02:02,310 --> 00:02:02,760 just do it. 34 00:02:02,850 --> 00:02:03,650 None. 35 00:02:03,660 --> 00:02:04,820 And the border goes away. 36 00:02:05,130 --> 00:02:08,420 Let's say we want different borders on different sides of the paragraph. 37 00:02:08,430 --> 00:02:13,080 So for that we have another problem these same borders style. 38 00:02:13,470 --> 00:02:14,780 So bottom up style. 39 00:02:15,540 --> 00:02:18,070 So let's say we want to solve it for the top. 40 00:02:18,630 --> 00:02:21,550 Then we've got border right style. 41 00:02:22,260 --> 00:02:34,710 So for this Let's say we go work dashed similarly for border bottom style let's say we go with dotted 42 00:02:35,400 --> 00:02:38,280 on border left style. 43 00:02:39,240 --> 00:02:44,410 Let's say we go with double let's save it and coming back to it. 44 00:02:44,520 --> 00:02:49,270 And now as you can see on all four sides you have different different border style. 45 00:02:49,290 --> 00:02:52,940 So this was one way of adding borders so we put another way as well. 46 00:02:53,730 --> 00:02:59,560 Let's come in to spin out so we've got a shorthand property called border. 47 00:03:00,200 --> 00:03:07,910 So just as much say you want to add a border of say four big with solid and blue color. 48 00:03:08,660 --> 00:03:17,020 So for that we can do something like this for pixels solid and blue let's say that. 49 00:03:17,170 --> 00:03:20,270 And as you can see our paragraph has a moat around it. 50 00:03:20,750 --> 00:03:25,210 So many using this shorthand probably the sequence is really crucial. 51 00:03:26,320 --> 00:03:29,090 So first you have to specify the border with it. 52 00:03:29,080 --> 00:03:34,760 Then the border state which could be dodged dotted solid double et cetera et cetera. 53 00:03:34,960 --> 00:03:44,970 And then you have to defend the column so you can use the column name or hex code say black or you can 54 00:03:44,970 --> 00:03:46,230 use LGB 55 00:03:49,620 --> 00:03:50,340 say 56 00:03:59,010 --> 00:04:03,230 some shade of blue so the sequence is something like this. 57 00:04:03,430 --> 00:04:09,820 So first we give the border with space the style space and color. 58 00:04:09,970 --> 00:04:12,350 Now say you want to make the corners good. 59 00:04:12,820 --> 00:04:16,770 So we've got another property for that which is called border radius. 60 00:04:16,810 --> 00:04:21,000 So let's try it. 61 00:04:21,030 --> 00:04:28,900 So what really is here you have to give a value in pixels a four pixel let's save it. 62 00:04:28,900 --> 00:04:34,990 And as you can see our borders are a bit gold let's increase the slightly say it pixels on as you can 63 00:04:34,990 --> 00:04:37,820 see our borders are a bit more code. 64 00:04:38,080 --> 00:04:40,090 Say you want to increase the value more. 65 00:04:40,120 --> 00:04:43,100 We can go with 20 pixels save it. 66 00:04:43,120 --> 00:04:45,620 And as you can see it's getting more and more good. 67 00:04:46,900 --> 00:04:52,760 Let us commanders not say for example you want to use this border as shorthand got you to define different 68 00:04:52,760 --> 00:04:55,180 border states for different sites. 69 00:04:55,190 --> 00:05:04,830 So for that we can do border dot see for pixels solid blue 70 00:05:08,470 --> 00:05:09,300 border right. 71 00:05:09,970 --> 00:05:14,470 So for pixels dodged blue 72 00:05:17,170 --> 00:05:31,830 border bottom say for pixels dotted on blue and bottom left say four pixels double and Red let's say 73 00:05:31,830 --> 00:05:37,730 what and as you can see we've got a different different border states on different different sides. 74 00:05:38,410 --> 00:05:39,800 That's all for today guys. 75 00:05:39,820 --> 00:05:45,150 If there's something that you did not understand feel free to drop a comment and we will discuss it. 76 00:05:45,220 --> 00:05:47,520 See you in the next video by undercover.