সিএসএস(৩) border-radius প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-radius | ৫.০ ৪.০ -webkit- |
৯.০ | ৪.০ ৩.০ -moz- |
৫.০ ৩.১ -webkit- |
১০.৫ |
সংজ্ঞা ও ব্যবহার
border-radius প্রোপার্টি একটি এলিমেন্টে গোলাকার কর্নার করতে ব্যবহৃত হয়।
border-radius প্রোপার্টি দ্বারা সহজেই চারটি বর্ডার-*-রেডিয়াসের প্রোপার্টি নির্ধারণ করা যায়।
যদি আপনি border-radius প্রোপার্টির জন্য একটি ভ্যালু দেন, তাহলে রেডিয়াস ৪টি কর্নারের জন্য প্রয়োগ হবে।
যাইহোক, আপনি চাইলে প্রত্যেকটি কর্নারের জন্য আলাদাভাবে ভ্যালু দিতে পারেন। নিচে কিছু নিয়ম দেয়া হলোঃ
- চারটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে, ৩য় ভ্যালু নিচ থেকে ডানে এবং ৪র্থ ভ্যালু নিচ থেকে বামে প্রয়োগ করে।
- তিনটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে এবং নিচ থেকে বামে, ৩য় ভ্যালু নিচ থেকে ডানে প্রয়োগ করে।
- দুইটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে এবং নিচ থেকে ডানে, ২য় ভ্যালু উপর থেকে ডান এবং নিচ থেকে বামে প্রয়োগ করে প্রয়োগ করে।
- একটি ভ্যালুঃ চারটি কর্নার সমান ভাবে গোলাকার হয়।
১. চারটি ভ্যালু - border-radius: 15px 50px 30px 5px:
২. তিনটি ভ্যালু - border-radius: 15px 50px 30px:
৩. দুইটি ভ্যালু - border-radius: 15px 50px:
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ০ | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
border-radius: 1-4 length/% / 1-4 length/%/initial/inherit;
পরামর্শঃ
- রটি রেডিয়াসের ভ্যালু দেওয়া হয় যথাক্রমে উপর থেকে বামে, উপর থেকে ডানে, নিচ থেকে ডানে এবং নিচ থেকে বামে। যদি নিচ থেকে বামের ভ্যালু বাদ দেওয়া হয় তবে এটি উপর থেকে ডানের ভ্যালুর সমান। যদি নিচ থেকে ডানের ভ্যালু বাদ দেওয়া হয় তবে এটি উপর থেকে বামের ভ্যালুর সমান। যদি উপর থেকে ডানের ভ্যালু বাদ দেওয়া হয় তবে এটি উপর থেকে বামের ভ্যালুর সমান।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid #ff69b4;
padding: 15px 45px;
background: #dddddd;
width: 350px;
border-radius: 25px;
}
</style>
</head>
<body>
<p> এলিমেন্টে রাউন্ড কর্নার যুক্ত করতে border-radius প্রোপার্টি ব্যবহার করা হয়েছে।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.borderRadius="25px"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDIV {
border: 2px solid red;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<p>div এলিমেন্টটিতে border-radius প্রোপার্টির পরিবর্তন দেখার জন্য "পরিবর্তন করি" বাটনটিতে ক্লিক করুন:</p>
<button onclick="myFunction()">পরিবর্তন করি</button>
<div id="thisDIV">
<h1>স্যাট একাডেমী</h1>
</div>
<script>
function myFunction() {
document.getElementById("thisDIV").style.borderRadius = "25px";
}
</script>
</body>
</html>
ফলাফল
উদাহরণ-১
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
উদাহরণ-২
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
আরো উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#satt1 {
border-radius: 25px;
border: 2px solid #ff6988;
padding: 25px;
width: 220px;
height: 200px;
}
#satt2 {
border-radius: 25px;
background: #00ff88;
padding: 25px;
width: 220px;
height: 200px;
}
#satt3 {
border-radius: 25px;
background: url(../images/satt.png);
background-position: left top;
background-repeat: repeat;
padding: 25px;
width: 220px;
height: 200px;
}
</style>
</head>
<body>
<h5>border-radius প্রোপার্টি একটি এলিমেন্টে রাউন্ড কর্নার যুক্ত করে।</h5>
<h5>একটি নির্দিষ্ট background-color সহ রাউন্ড কর্নার:</h5>
<h4 id="satt1">রাউন্ড কর্নার!</h4>
<h5>বর্ডারসহ একটি এলিমেন্টের রাউন্ড কর্নার:</h5>
<h4 id="satt2">রাউন্ড কর্নার!</h4>
<h5>background-image সহ একটি এলিমেন্টের রাউন্ড কর্নার:</h5>
<h4 id="satt3">রাউন্ড কর্নার!</h4>
</body>
</html>
ফলাফল
border-radius প্রোপার্টির ভ্যালু-সমূহ
- length - কর্নারের সেপ নির্ধারণ করে। ডিফল্ট ভ্যালু ০ ।
- % -কর্নারের সেপ আকৃতিকে শতকরায় সেপ নির্ধারণ করে ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
border-radius প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।