बॉर्डर स्टाइलिंग
हम किसी एलिमेंट के लिए बॉर्डर परिभाषित कर सकते हैं और CSS से उन्हें स्टाइल कर सकते हैं। CSS border प्रॉपर्टी border-width, border-style, border-color का शॉर्टहैंड है। इसके अलावा, इमेज को बॉर्डर के रूप में भी निर्दिष्ट किया जा सकता है।
सिंटैक्स
Selector { border: /*value*/ }
उदाहरण 1: बॉर्डर इमेज
<!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>
आउटपुट
उदाहरण 2: ग्रेडिएंट बॉर्डर
<!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>
आउटपुट
