Hello everyone and welcome back.
In today's video we will learn how to our borders to extremist elements using fuses.
CSX provides us with properties to add and customize borders for its dismal elements.
Let's try these properties with examples to understand them better.
Say we want to our border to this paragraph.
Let's give a try.
So let's bring up our good editor.
So it was the second paragraph.
So let's give it an idea.
Say second row.
Let's say that.
Coming back to a index let's see assess.
And because it's an idea so hash and the name of the second Barrow.
So you define a border.
You need two values.
So first we need the border style this accepts many values so we can use the values a dotted dashed
solid double et cetera et cetera.
So let's start with dotted then we need to define the border with say border would see what it says
and then we need to define the border.
See Red let's save it.
Let's bring up our editor here.
And as you can see our bar graph has adopted border.
Let's zoom into it let's try and using the border with say two pixels.
And as you can see these dots are a bit taken up.
Let's make them say six pixels.
And now as you can see these dots are even bigger.
So we don't want it to be dotted.
Let's try another option so we have got dashed here.
Let's see the.
And as you can see our borders are now dashed.
You've got another option solid.
So we've got the solid line as a border around the biggest similarly if we don't want anybody we could
just do it.
None.
And the border goes away.
Let's say we want different borders on different sides of the paragraph.
So for that we have another problem these same borders style.
So bottom up style.
So let's say we want to solve it for the top.
Then we've got border right style.
So for this Let's say we go work dashed similarly for border bottom style let's say we go with dotted
on border left style.
Let's say we go with double let's save it and coming back to it.
And now as you can see on all four sides you have different different border style.
So this was one way of adding borders so we put another way as well.
Let's come in to spin out so we've got a shorthand property called border.
So just as much say you want to add a border of say four big with solid and blue color.
So for that we can do something like this for pixels solid and blue let's say that.
And as you can see our paragraph has a moat around it.
So many using this shorthand probably the sequence is really crucial.
So first you have to specify the border with it.
Then the border state which could be dodged dotted solid double et cetera et cetera.
And then you have to defend the column so you can use the column name or hex code say black or you can
use LGB
say
some shade of blue so the sequence is something like this.
So first we give the border with space the style space and color.
Now say you want to make the corners good.
So we've got another property for that which is called border radius.
So let's try it.
So what really is here you have to give a value in pixels a four pixel let's save it.
And as you can see our borders are a bit gold let's increase the slightly say it pixels on as you can
see our borders are a bit more code.
Say you want to increase the value more.
We can go with 20 pixels save it.
And as you can see it's getting more and more good.
Let us commanders not say for example you want to use this border as shorthand got you to define different
border states for different sites.
So for that we can do border dot see for pixels solid blue
border right.
So for pixels dodged blue
border bottom say for pixels dotted on blue and bottom left say four pixels double and Red let's say
what and as you can see we've got a different different border states on different different sides.
That's all for today guys.
If there's something that you did not understand feel free to drop a comment and we will discuss it.
See you in the next video by undercover.