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

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

হোম-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

 

সিএসএস বর্ডার


সিএসএস border প্রোপার্টি

সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।

আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ

এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে।



এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।


এই এলিমেন্টের right-এ লাল কালারের বর্ডার ব্যবহার করা হয়েছে।


এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে।



এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ

border

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom

একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-color

নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-style

নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-width

নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-color

বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left

একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-color

বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-style

বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-width

বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-radius

চারপাশের বর্ডারের কর্ণারগুলোকে রাউন্ড করার জন্য এটি ব্যবহার করা হয়।

border-right

একটি ডিক্লেয়ারেশনের মাধ্যমে ডান পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-right-color

ডান পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-right-style

ডান পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-right-width

ডান পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-style

বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top

একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-color

উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-style

উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-width

উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-width

বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।



বর্ডার(Border) স্টাইল

বিভিন্ন ধরনের বর্ডার তৈরির জন্য সিএসএস border-style প্রোপার্টিটি ব্যবহার করা হয়।

নিম্নে border-style প্রোপার্টির জন্য ব্যবহৃত ভ্যালুগুলো দেওয়া হলোঃ

  • solid - এটি solid বর্ডার ডিফাইন করে
  • double - এটি double বর্ডার ডিফাইন করে
  • dotted - এটি dotted বর্ডার ডিফাইন করে
  • dashed - এটি dashed বর্ডার ডিফাইন করে
  • inset - এটি 3D inset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • outset - এটি 3D outset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • groove - এটি 3D grooved বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • ridge - এটি 3D ridge বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • hidden - এটি বর্ডারকে হিডেন করে
  • none - কোন বর্ডার ডিফাইন করে না

border-style প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <h2>border-style প্রোপার্টি</h2>

  <p style="border-style: dotted;">একটি dotted বর্ডার।</p>
  <p style="border-style: dashed;">একটি dashed বর্ডার।</p>
  <p style="border-style: solid;">একটি solid বর্ডার।</p>
  <p style="border-style: double;">একটি double বর্ডার।</p>
  <p style="border-style: groove;">একটি grooved বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
  <p style="border-style: ridge;">একটি ridge বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
  <p style="border-style: inset;">একটি inset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
  <p style="border-style: outset;">একটি outset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
  <p style="border-style: none;">এখানে কোন বর্ডার ব্যবহার করা হয় নাই।</p>
  <p style="border-style: hidden;">এটি একটি হিডেন বর্ডার।</p>
  <p style="border-style: dotted dashed solid double;">বিভিন্ন ভ্যালু দ্বারা মিশ্রিত একটি বর্ডার।</p>

</body>
</html>

ফলাফল



বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।



border-width

একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।

border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.text1 {
    border-style: solid;
    border-width: 5px;
  }
  p.text2 {
    border-style: solid;
    border-width: medium;
  }
  p.text3 {
    border-style: dotted;
    border-width: 2px;
  }
  p.text4 {
    border-style: dotted;
    border-width: thick;
  }
  p.text5 {
    border-style: double;
    border-width: 15px;
  }
  p.text6 {
    border-style: double;
    border-width: thick;
  }
  p.text7 {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
  }
  </style>
</head>
<body>

  <h2>border-width প্রোপার্টি</h2>

  <p class="text1">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text2">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text3">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text4">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text5">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text6">বর্ডার width প্রোপার্টির ব্যবহার</p>
  <p class="text7">বর্ডার width প্রোপার্টির ব্যবহার</p>

</body>
</html>

বিঃদ্রঃ border-width প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।

ফলাফল





border-color

বর্ডারের কালার সেট করার জন্য border-color প্রোপার্টিটি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

  • Name - কালারের নাম ব্যবহার করে, যেমন "red"
  • Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#ff0000"
  • RGB - RGB ভ্যালু ব্যবহার করে, যেমন "rgb(255,0,0)"
  • অথবা
  • transparent ব্যবহার করে।

border-color প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলো: (top border, right border, bottom border, এবং left border) 

border-color নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.text1 {
    border-style: solid;
    border-color: black;
  }
  p.text2 {
    border-style: solid;
    border-color: teal;
  }
  p.text3 {
    border-style: solid;
    border-color: green black blue yellow;
  }
  </style>
</head>
<body>

  <h2>border-color property</h2>

  <p class="text1">solid red border</p>
  <p class="text2">solid green border</p>
  <p class="text3">solid multicolor border</p>

</body>
</html>

বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।

ফলাফল





প্রত্যেক পাশে পৃথকভাবে বর্ডারের ব্যবহার

আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।

পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
  padding: 8px;
  }
  </style>
</head>
<body>

  <p>চারদিকের বর্ডারের স্টাইল দেওয়ার জন্য চারটি প্রোপার্টি ব্যবহার করা হয়েছে।</p>

</body>
</html>

ফলাফল




এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    border-style: dotted solid;
    padding: 8px;
  }
  </style>
</head>
<body>

  <p>চারপাশের বর্ডারের স্টাইল দেওয়ার একটি শর্টহ্যান্ড প্রোপার্টি ব্যবহার করা হয়েছে।</p>

</body>
</html>

ফলাফল





উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

    যেমন- border-style: dotted solid double dashed;
    • উপরের বর্ডারটি dot স্টাইলের হবে।
    • ডানের বর্ডারটি solid স্টাইলের হবে।
    • নিচের বর্ডারটি double স্টাইলের হবে।
    • বামের বর্ডারটি dashed স্টাইলের হবে।

যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

    যেমন- border-style: dotted solid double;
    • উপরের বর্ডারটি dot স্টাইলের হবে।
    • ডানের এবং বামের বর্ডার দুটি solid স্টাইলের হবে।
    • নিচের বর্ডারটি double স্টাইলের হবে।

যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

    যেমন- border-style: dotted solid;
    • উপরের এবং নিচের বর্ডার দুটি dotted স্টাইলের হবে।
    • ডানের এবং বামের বর্ডার দুটি solid স্টাইলের হবে।

যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ

    যেমন- -style: dotted;\
    • চারপাশের বর্ডারই dot স্টাইলের হবে।


উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।



border - শর্টহ্যান্ড প্রোপার্টি

আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।

তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।

নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:

  • border-width
  • border-style (আবশ্যক)
  • border-color

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    border: 5px solid teal;
    padding: 8px;
  }
  </style>
</head>
<body>

  <h2>border প্রোপার্টি</h2>
  <p>এটি বর্ডারের প্রস্থ(border-width), বর্ডারের স্টাইল(border-style) এবং বর্ডারের
     কালার(border-color) একত্রে ব্যবহার করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>

</body>
</html>

ফলাফল





এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ

উদাহরণঃ border-left

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    border-left: 6px solid #0099aa;
    background-color: lightgrey;
    padding: 5px;
  }
  </style>
</head>
<body>

  <h2>border-left প্রোপার্টি</h2>
  <p>এটি বাম পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>

</body>
</html>

ফলাফল




উদাহরণঃ border-bottom

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    border-bottom: 6px solid #0099aa;
    background-color: lightgrey;
    padding:5px;
  }
  </style>
</head>
<body>

  <h2>border-bottom প্রোপার্টি</h2>
  <p>এটি নিচের পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>

</body>
</html>

ফলাফল





রাউন্ডেড বর্ডার

একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.simple {
    border: 3px solid teal;
    padding-left: 10px;
  }
    p.round_border1 {
    border: 3px solid teal;
    border-radius: 5px;
    padding-left: 10px;
  }
  p.round_border2 {
    border: 3px solid teal;
    border-radius: 10px;
    padding-left: 10px;
  }
    p.round_border3 {
    border: 3px solid teal;
    border-radius: 15px;
    padding-left: 10px;
  }
  </style>
</head>
<body>

<h2>border-radius প্রোপার্টি</h2>

<p class="simple">সাধারন বর্ডার(Normal border)</p>
<p class="round_border1">গোল বর্ডার (Round border)</p>
<p class="round_border2">গোলাকার বর্ডার(Rounder border)</p>
<p class="round_border3">Roundest border(গোলাকৃতি বর্ডার)</p>

</body>
</html>

ফলাফল

বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।