To conclude the borders topic, let's now deal with the setting rounded corners, therefore border radius
and adding shadows, therefore box shadow apply to the borders.
Let's start by deleting our border image and let's set a 20 pixel solid black border.
Let's refresh and let's see that we have our border of 20 pixels solid.
And once done this, let's start dealing with border radius.
This attribute.
Enables us to insert a span made of a certain number of pixels that can be applied to the whole border,
therefore to all the four corners or else just to one or two or three of them.
Let's start with a simple general application.
Let's insert, for example, a 30 piece of border.
Let's even refresh and see that our border.
Has all the four corners displayed as rounded to distinguish them one by one, we have to consider the
top left corner as first inserted corner.
Then let's continue clockwise and we can now insert four values and then to cover every corner.
Let's leave the pixels for the first light since the second laptop, right, one 10 pixels after that,
let's insert zero pixel leaving this way, a boulder without any rounding.
And let's insert once again ten pixels for the bottom left corner.
Now let's save and refresh.
As you see, the first corner remains so 30 pixels, the second gets slightly rounded by only 10 pixels
like the one across, and instead the bottom right corner does not undergo any type of roundy.
Of course, if we reduce the border dimensions and refresh.
The result would not change because the values rounded borders by inserting the thick cells inside border
radios.
Do not affect anyway, the border with.
Apart from border radios, there's also box shadow, box shadow is a property consenting us to insert
values, referring to the horizontal and vertical shadow.
Inside the borders expressed in pixels, too, but adding the possibility to insert values relative
to the blood radios and the spread ridges of the shadow, in addition, of course, to the color.
If we inserted, for example, 10 pixels and 10 pixels and black.
Life saving and refreshing automatically, as you can see, a marked black shadow would be added.
Because neither the Blu ray is attacked nor the spread of AIDS affect our present.
Let's modify our border into two pixel so that the shadow can be better visualized and let's insert
instead of like a hexadecimal value which might represent black but in a dimmer tone, therefore, that's
insert three three three in addition to the values ten and ten regarding the horizontal and vertical
shadowing.
Let's add a bit of blur.
Therefore, let's insert a five pixel radius, saving and refreshing.
We obtain a light blurring effect at the bottom of our shadow.
Of course, if we could insert any type of color and if we could add a spread radius to it, we would
also be able to make a shadow much wider than the box contained.
If we added an additional 15 pixel of value, choosing, for example, red as a color.
Saving and refreshing.
We would obtain a much wider shadow in comparison to The Selecter, therefore to the tag on which it
is applied.
Of course, all these methods to be able to insert a shadow have to be used with a sense of measure.
I mean, they have to be applied in the correct way so that they may result.
Pleasant to look at.
By the way, watch out use a color like the one seen before.
Do not use red, green or blue after that, even without the spread reduce value, which anyway tends
to enlarge our shadow a lot, we can insert an inferior shadow as far as the horizontal part, therefore
below our tag where it is inserted.
And we cannot blur radios at the tower, for example, of 15 pixel in so doing, if we save and refresh,
we would obtain a much more pleasant and classical schedule to insert into our Web pages.