আমরা একটি উপাদানের জন্য সীমানা নির্ধারণ করতে পারি এবং 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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
