সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) বৃত্তাকার কর্ণার

বৃত্তাকার ইমেজ!

সিএসএস(৩) বৃত্তাকার কর্ণার

আপনি কোনো ইমেজ বা একাধিক <div> ব্যবহার করা ছাড়াই যেকোনো এলিমেন্ট অথবা টেক্সটে বৃত্তাকার বর্ডার বা কর্ণার দিতে পারবেন। সিএসএস(৩) border-radius প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারেন।


এক নজরে বৃত্তাকার কর্ণারের সম্ভাব্য প্রোপার্টি-সমূহ

border-radius

বর্ডারের সবগুলো কর্ণারের আকৃতি সেট করে।

border-top-left-radius

বর্ডারের উপরের-বাম কর্ণারের আকৃতি সেট করে।

border-top-right-radius

বর্ডারের উপরের-ডান কর্ণারের আকৃতি সেট করে।

border-bottom-right-radius

বর্ডারের নিচের-ডান কর্ণারের আকৃতি সেট করে।

border-bottom-left-radius

বর্ডারের নিচের-বাম কর্ণারের আকৃতি সেট করে।


সিএসএস(৩) border-radius প্রোপার্টি

সিএসএস(৩) border-radius প্রোপার্টি ব্যবহার করে আপনি যেকোনো এলিমেন্টের কর্ণার বৃত্তাকার করতে পারেন।

নিচের উদাহরণে তা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>সিএসএস border-radius এর উদাহরণ</title>
    <style>
        #rounded1 {
            border-radius:30px;
            background:turquoise;
            padding:25px;
            width:200px;
            height:80px;
            text-align: center;
            font-size: 15px;
        }

        #rounded2 {
            border-radius: 25px;
            border: 5px solid teal;
            text-align: center;
            font-size: 15px;
            padding:25px;
            width:200px;
            height:80px;
        }

        #rounded3 {
            border-radius: 25px;
            background: url(../css_examples/natural.jpg);
            background-position: left top;
            background-repeat: repeat;
            text-align: center;
            font-size: 15px;
            padding:25px;
            width:200px;
            height:80px;
        }
    </style>
   
</head>
<body>

<h2>border-radius প্রোপার্টির ব্যবহারঃ</h2>
<p id="rounded1">সুনির্দিষ্ট  ব্যাকগ্রাউন্ড-কালারসহ একটি এলিমেন্টের চারদিক বৃত্তাকার!</p>
<p id="rounded2"> বর্ডারসহ একটি  এলিমেন্টের  চারদিক বৃত্তাকার!</p>
<p id="rounded3"> ছবিসহ একটি  এলিমেন্টের  চারদিক বৃত্তাকার!</p>

</body>
</html>

ফলাফল




বিঃদ্রঃ border-radius প্রোপার্টিটি আসলে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius প্রোপার্টিসমূহ একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।


বর্ডারে প্রতিটি কর্ণারে জন্য আলাদা-আলাদা ভ্যালু

আপনি যদি border-radius প্রোপার্টিতে ১টি ভ্যালু উল্লেখ করেন তাহলে এটি ৪টি কর্ণারের জন্যই প্রযোজ্য হবে।

যাইহোক, আপনি ইচ্ছা করলে প্রত্যেক কর্ণারের জন্যই ভিন্ন ভিন্ন ভ্যালু নির্ধারণ করতে পারেন। এক্ষেত্রে আপনি একটি থেকে চারটি পর্যন্ত ভ্যালু ব্যবহার করতে পারেন। border-radius প্রোপার্টিতে ভ্যালু ব্যবহার পদ্ধতি নিম্নে তুলে ধরা হলোঃ

  • চারটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান কর্ণার, তৃতীয় ভ্যালুটি নিচের-ডান কর্ণার এবং চতুর্থ ভ্যালুটি নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
  • তিনটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণার, এবং তৃতীয় ভ্যালুটি নিচের-ডান কর্ণারের জন্য প্রযোজ্য হবে।
  • দুইটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম এবং নিচের-ডান কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
  • একটি ভ্যালুঃ চারটি কর্ণারের জন্যই প্রযোজ্য হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস border-radius এর উদাহরণ</title>
<style>
#rounded1{
    border-radius: 20px 60px 35px 10px;
    background:lightseagreen;
    padding:25px;
    width:150px;
    height:40px;
}

#rounded2 {
    border-radius: 20px 60px 35px;
    background:lightseagreen;
    padding:25px;
    width:150px;
    height:40px;
}

#rounded3{
    border-radius: 20px 60px;
    background:lightseagreen;
    padding:25px;
    width:150px;
    height:40px;
}
</style>
</head>
<body>

<p>চারটি ভ্যালু  - border-radius: 20px 60px 35px 10px;</p>
<p id="rounded1">স্যাট একাডেমি</p>

<p> তিনটি ভ্যালু - border-radius: 20px 60px 35px;</p>
<p id="rounded2">স্যাট একাডেমি</p>

<p>দুইটি ভ্যালু - border-radius: 20px 60px;</p>
<p id="rounded3">স্যাট একাডেমি</p>

</body>
</html>

ফলাফল




border-radius প্রোপার্টি ব্যবহার করে আপনি উপবৃত্তাকার কর্ণারও তৈরি করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#rounded1 {
    border-radius:40px/20px;
    width:150px;
    height:40px;
    background:#8a7b4c;
    padding:25px;
}

#rounded2 {
    border-radius:20px/40px;
    width:150px;
    height:40px;
    background:#83b;
    padding:25px;  
}

#rounded3 {
    border-radius: 50%;
    width:150px;
    height:40px;
    background:#79A;
    padding:25px;
    text-align:center;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<p>উপবৃত্তাকার বর্ডার - border-radius: 40px/20px;</p>
<p id="rounded1">স্যাট একাডেমি</p>

<p>উপবৃত্তাকার বর্ডার - border-radius:20px/40px;</p>
<p id="rounded2">স্যাট একাডেমি</p>

<p>উপবৃত্তাকার বর্ডার - border-radius:50%;</p>
<p id="rounded3">স্যাট একাডেমি</p>
    
</body>
</html>

ফলাফল




ব্রাউজার সাপোর্ট

এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
প্রোপার্টি 10.5 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-