CSS বর্ডার-স্টাইল প্রপার্টি একটি উপাদানের জন্য বর্ডার স্টাইল নির্দিষ্ট করতে ব্যবহৃত হয়। বর্ডার-টপ-স্টাইল, বর্ডার-ডান-স্টাইল, বর্ডার-বাম-স্টাইল এবং বর্ডার-ডান-স্টাইল বৈশিষ্ট্যগুলি ব্যবহার করে আমরা পৃথক পক্ষের জন্য বর্ডার-স্টাইল সংজ্ঞায়িত করতে পারি।
সিনট্যাক্স
CSS বর্ডার প্রপার্টির সিনট্যাক্স নিম্নরূপ -
Selector {
border: /*value*/
} নিম্নলিখিত উদাহরণগুলি CSS বর্ডার-স্টাইল প্রপার্টি −
চিত্রিত করেউদাহরণ
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
