0% found this document useful (0 votes)
4 views7 pages

16 Border

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views7 pages

16 Border

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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