1 00:00:05,190 --> 00:00:15,210 To conclude the borders topic, let's now deal with the setting rounded corners, therefore border radius 2 00:00:15,210 --> 00:00:20,040 and adding shadows, therefore box shadow apply to the borders. 3 00:00:20,220 --> 00:00:28,300 Let's start by deleting our border image and let's set a 20 pixel solid black border. 4 00:00:28,890 --> 00:00:37,080 Let's refresh and let's see that we have our border of 20 pixels solid. 5 00:00:37,200 --> 00:00:41,960 And once done this, let's start dealing with border radius. 6 00:00:42,210 --> 00:00:43,320 This attribute. 7 00:00:44,420 --> 00:00:54,920 Enables us to insert a span made of a certain number of pixels that can be applied to the whole border, 8 00:00:54,920 --> 00:01:02,300 therefore to all the four corners or else just to one or two or three of them. 9 00:01:02,330 --> 00:01:06,670 Let's start with a simple general application. 10 00:01:06,680 --> 00:01:11,160 Let's insert, for example, a 30 piece of border. 11 00:01:11,300 --> 00:01:15,080 Let's even refresh and see that our border. 12 00:01:16,160 --> 00:01:25,160 Has all the four corners displayed as rounded to distinguish them one by one, we have to consider the 13 00:01:25,160 --> 00:01:28,430 top left corner as first inserted corner. 14 00:01:28,830 --> 00:01:36,490 Then let's continue clockwise and we can now insert four values and then to cover every corner. 15 00:01:38,500 --> 00:01:47,530 Let's leave the pixels for the first light since the second laptop, right, one 10 pixels after that, 16 00:01:47,530 --> 00:01:52,720 let's insert zero pixel leaving this way, a boulder without any rounding. 17 00:01:54,770 --> 00:01:59,690 And let's insert once again ten pixels for the bottom left corner. 18 00:02:00,500 --> 00:02:03,140 Now let's save and refresh. 19 00:02:04,680 --> 00:02:14,040 As you see, the first corner remains so 30 pixels, the second gets slightly rounded by only 10 pixels 20 00:02:14,190 --> 00:02:20,700 like the one across, and instead the bottom right corner does not undergo any type of roundy. 21 00:02:22,080 --> 00:02:26,100 Of course, if we reduce the border dimensions and refresh. 22 00:02:28,520 --> 00:02:36,140 The result would not change because the values rounded borders by inserting the thick cells inside border 23 00:02:36,140 --> 00:02:36,830 radios. 24 00:02:37,910 --> 00:02:41,090 Do not affect anyway, the border with. 25 00:02:45,340 --> 00:02:54,850 Apart from border radios, there's also box shadow, box shadow is a property consenting us to insert 26 00:02:54,850 --> 00:02:59,050 values, referring to the horizontal and vertical shadow. 27 00:03:00,320 --> 00:03:08,150 Inside the borders expressed in pixels, too, but adding the possibility to insert values relative 28 00:03:08,150 --> 00:03:15,410 to the blood radios and the spread ridges of the shadow, in addition, of course, to the color. 29 00:03:17,810 --> 00:03:23,960 If we inserted, for example, 10 pixels and 10 pixels and black. 30 00:03:25,860 --> 00:03:35,190 Life saving and refreshing automatically, as you can see, a marked black shadow would be added. 31 00:03:36,870 --> 00:03:43,440 Because neither the Blu ray is attacked nor the spread of AIDS affect our present. 32 00:03:45,100 --> 00:03:55,750 Let's modify our border into two pixel so that the shadow can be better visualized and let's insert 33 00:03:56,020 --> 00:04:07,600 instead of like a hexadecimal value which might represent black but in a dimmer tone, therefore, that's 34 00:04:07,600 --> 00:04:17,410 insert three three three in addition to the values ten and ten regarding the horizontal and vertical 35 00:04:17,410 --> 00:04:18,310 shadowing. 36 00:04:18,730 --> 00:04:21,720 Let's add a bit of blur. 37 00:04:21,880 --> 00:04:27,970 Therefore, let's insert a five pixel radius, saving and refreshing. 38 00:04:28,270 --> 00:04:34,180 We obtain a light blurring effect at the bottom of our shadow. 39 00:04:34,240 --> 00:04:42,040 Of course, if we could insert any type of color and if we could add a spread radius to it, we would 40 00:04:42,040 --> 00:04:47,050 also be able to make a shadow much wider than the box contained. 41 00:04:49,210 --> 00:04:57,400 If we added an additional 15 pixel of value, choosing, for example, red as a color. 42 00:04:58,380 --> 00:05:00,120 Saving and refreshing. 43 00:05:01,090 --> 00:05:10,930 We would obtain a much wider shadow in comparison to The Selecter, therefore to the tag on which it 44 00:05:10,930 --> 00:05:11,890 is applied. 45 00:05:13,050 --> 00:05:21,450 Of course, all these methods to be able to insert a shadow have to be used with a sense of measure. 46 00:05:21,900 --> 00:05:27,700 I mean, they have to be applied in the correct way so that they may result. 47 00:05:27,700 --> 00:05:29,370 Pleasant to look at. 48 00:05:29,850 --> 00:05:34,770 By the way, watch out use a color like the one seen before. 49 00:05:35,250 --> 00:05:43,890 Do not use red, green or blue after that, even without the spread reduce value, which anyway tends 50 00:05:43,890 --> 00:05:54,090 to enlarge our shadow a lot, we can insert an inferior shadow as far as the horizontal part, therefore 51 00:05:54,810 --> 00:05:58,320 below our tag where it is inserted. 52 00:05:59,850 --> 00:06:09,390 And we cannot blur radios at the tower, for example, of 15 pixel in so doing, if we save and refresh, 53 00:06:09,400 --> 00:06:16,380 we would obtain a much more pleasant and classical schedule to insert into our Web pages.