0% found this document useful (0 votes)
4 views

16 Border-converted

Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views

16 Border-converted

Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

border-style

This property sets border style of an element. We can set this


property to none, hidden, dotted, dashed, solid, double, groove,
ridge, inset, outset.
Ex:-
p { border-style: dashed; }
border-style
p { border-style: dotted solid double dashed; }

top right bottom left

p { border-style: dotted solid dashed; }

top right left bottom

p { border-style: dotted solid; }

top bottom right left

p { border-style: dotted; }
all
border-width
It sets width of element’s border. We can set this property to thin,
medium, thick, length in the form of px.
Ex:-
p { border-style: solid; border-width: thick;}
p { border-style: solid; border-width: 5px;}
border-width
p { border-width: thick medium thin 5px; }

top right bottom left

p { border-width: thick medium 5px; }

top right left bottom

p { border-width: thick thin; }

top bottom right left

p { border-width: 5px; }
all
border-color
It sets color of border. We can set this property to transparent and
color value.
Ex:-
p { border-style: solid; border-color: blue;}
p { border-style: solid; border-color: #5A4218;}
border-color
p { border-color: blue red black green; }

top right bottom left

p { border-color: blue orange green; }

top right left bottom

p { border-color: green orange; }

top bottom right left

p { border-color: blue; }
all
border
It is shorthand of all border properties. The order should be :
border-width, border-style, and border-color.
Ex: -
p { border: 10px solid blue; }
p { border: solid blue; }

You might also like