CSS border-style प्रॉपर्टी का उपयोग किसी एलिमेंट के लिए बॉर्डर स्टाइल स्पेसिफाई करने के लिए किया जाता है। हम border-top-style, border-right-style, border-left-style और border-right-style प्रॉपर्टीज़ का उपयोग करके इंडिविजुअल साइड्स के लिए बॉर्डर-स्टाइल भी परिभाषित कर सकते हैं।
सिंटैक्स
CSS border प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { border: /*value*/ }निम्नलिखित उदाहरण CSS border-style प्रॉपर्टी को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> div:first-of-type { margin: 5% 0 0 20%; } div { height: 40px; width: 40px; margin: auto; padding: 10px; border-style: solid; display: flex; float: left; } #d1 { border-style: double dashed; } #d2 { border-style: dotted; } </style> </head> <body> <div></div> <div id="d1"></div> <div id="d2"></div> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin: 20px; float: left; height: 80px; width: 60px; border-style: ridge; border-width: 1.2em; border-color: midnightblue; border-bottom-left-radius: 50%; } div + div { height: 120px; width: 80px; border-style: double; border-color: seagreen; border-right-width: 180px; border-bottom-right-radius: 100%; } </style> </head> <body> <div></div> <div></div> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
