CSS Border properties give you control to set border style. eg. border-width, border-style and border-color.
You can also set border style individually like,
सीएसएस सीमा गुण आपको सीमा शैली सेट करने के लिए नियंत्रण प्रदान करते हैं। जैसे। सीमा-चौड़ाई, सीमा-शैली और सीमा-रंग
आप अलग तरह की सीमा शैली को भी सेट कर सकते हैं,
आप अलग तरह की सीमा शैली को भी सेट कर सकते हैं,
Border
|
Border
Properties
|
border-top
|
border-top-color
border-top-style border-top-width |
border-bottom
|
border-bottom-color
border-bottom-style border-bottom-width |
border-left
|
border-left-color
border-left-style border-left-width |
border-right
|
border-right-color
border-right-style border-right-width |
Example Code:
<body>
<p style="border-style: solid;border-width: 1px;border-color: orange;">This Paragraph is example of the border
properties of CSS style can change a border color, border width or border style.</p>
</body>
CSS border shorthand property
CSS border property write in shorthand way including following border properties:
- border-width
- border-style
- border-color
border: border-width border-style border-color;
Same as above, you can set border shorthand individually,
- border-left
- border-right
- border-top
- border-bottom
Example Code:
<body>
<p style="border-top:2px dashed orange;">top border style dashed.</p>
</body>
<p style="border-top:2px dashed orange;">top border style dashed.</p>
</body>
CSS border-style property
Example Code:
<body>
<p style="border:2px solid orange;"> border style is solid.</p>
<p style="border:2px dotted orange;"> border style is dotted.</p>
<p style="border:2px dashed orange;"> border style is dashed.</p>
<p style="border:2px double orange;"> border style is double.</p>
<p style="border:2px groove orange;"> border style is groove.</p>
<p style="border:2px ridge orange;"> border style is ridge.</p>
<p style="border:2px inset orange;"> border style is inset.</p>
<p style="border:2px outset orange;"> border style is outset.</p>
<p style="border:2px hidden orange;"> border style is hidden.</p>
</body>
<p style="border:2px solid orange;"> border style is solid.</p><p style="border:2px dotted orange;"> border style is dotted.</p>
<p style="border:2px dashed orange;"> border style is dashed.</p>
<p style="border:2px double orange;"> border style is double.</p>
<p style="border:2px groove orange;"> border style is groove.</p>
<p style="border:2px ridge orange;"> border style is ridge.</p>
<p style="border:2px inset orange;"> border style is inset.</p>
<p style="border:2px outset orange;"> border style is outset.</p>
<p style="border:2px hidden orange;"> border style is hidden.</p>
</body>
No comments:
Post a Comment