हम किसी तत्व के लिए बॉर्डर परिभाषित कर सकते हैं और CSS का उपयोग करके उन्हें स्टाइल कर सकते हैं। CSS बॉर्डर प्रॉपर्टी का उपयोग किसी तत्व के बॉर्डर प्रॉपर्टीज को परिभाषित करने के लिए किया जाता है। यह सीमा-चौड़ाई, सीमा-शैली और सीमा-रंग के लिए एक आशुलिपि है। इसके अलावा, छवियों को सीमा के रूप में निर्दिष्ट किया जा सकता है।
सिंटैक्स
CSS बॉर्डर प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
border: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS बॉर्डर प्रॉपर्टी को दर्शाते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 70px solid transparent;
margin: 15px;
padding: 3px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
margin: auto;
width: 60%;
border: 4px solid sienna;
padding: 10px;
background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
border-radius: 55px 100px 2px 95px;
}
#d2 {
border: 1.5px solid rosybrown;
padding: 10px;
border-radius: 205px 500px;
}
img {
border-radius: 3% 50%;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
