CSS – border properties

border-colorsets border’s color

border-color: black;

border-width sets border’s width

border-width: 2px;

border-style sets border’s style. Values can take none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

border-style: solid;
How to customize borders, <span>CSS – border properties</span>, KandZ
hidden
How to customize borders, <span>CSS – border properties</span>, KandZ
solid
How to customize borders, <span>CSS – border properties</span>, KandZ
dotted
How to customize borders, <span>CSS – border properties</span>, KandZ
dashed
How to customize borders, <span>CSS – border properties</span>, KandZ
double
How to customize borders, <span>CSS – border properties</span>, KandZ
groove
How to customize borders, <span>CSS – border properties</span>, KandZ
ridge
How to customize borders, <span>CSS – border properties</span>, KandZ
inset
How to customize borders, <span>CSS – border properties</span>, KandZ
outset

Instead of using the above three properties you can use only the property border.

How to customize borders, <span>CSS – border properties</span>, KandZ

First you specify the width, then the type and then the color. If you do not want to have all the four borders, then you can use border-left, border-top, border-right and border-bottom.

border-radiusdefines the shape of the border. If you want to change only one corner then use border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

How to customize borders, <span>CSS – border properties</span>, KandZ
How to customize borders, <span>CSS – border properties</span>, KandZ

box-shadow – applies a shadow effect to the rectangle. box-shadows: xOffset, yOffset, blur, color

How to customize borders, <span>CSS – border properties</span>, KandZ
How to customize borders, <span>CSS – border properties</span>, KandZ

And an extra text-shadow – applies shadow to the text.

How to customize borders, <span>CSS – border properties</span>, KandZ
How to customize borders, <span>CSS – border properties</span>, KandZ

THE END!!!

93600cookie-checkCSS – border propertiesCSS – border properties

Related posts

One Thought to “CSS – border properties

Comments are closed.