X

X

X

CSS এ বর্ডারের ব্যবহার


CSS -এর Border Property সমূহ

কোনো ইলামেন্টের বর্ডারের এর style, width, এবং color ইত্যাদি border প্রপার্টি ব্যবহার করে সেট করা যায়।

I have borders on all sides.

 

I have a red bottom border.

 

I have rounded borders.

 

I have a blue left border.

Border-এর Style

border-style property দিয়ে বর্ডারের স্টাইল বর্ণনা করা হয়। নিচে যেকোনো ইলামেন্টের জন্য ব্যবহৃত স্টাইলসমূহের নাম উল্লেখ্য করা হলো:

  • dotted – dotted border তৈরি করার জন্য ব্যবহৃত হয়।
  • dashed – dashed border তৈরি করার জন্য ব্যবহৃত হয়।
  • solid – solid border তৈরি করার জন্য ব্যবহৃত হয়।
  • double – double border তৈরি করার জন্য ব্যবহৃত হয়।
  • groove – 3D grooved border তৈরি করার জন্য ব্যবহৃত হয়। এর ইফেক্টটি বর্ডারের রংয়ের উপর নির্ভর করে।
  • ridge – 3D ridged border তৈরি করার জন্য ব্যবহৃত হয়। এর ইফেক্টটি বর্ডারের রংয়ের উপর নির্ভর করে।
  • inset – 3D inset border তৈরি করার জন্য ব্যবহৃত হয়। এর ইফেক্টটি বর্ডারের রংয়ের উপর নির্ভর করে।
  • outset – 3D outset border তৈরি করার জন্য ব্যবহৃত হয়। এর ইফেক্টটি বর্ডারের রংয়ের উপর নির্ভর করে।
  • none – বর্ডার প্রদর্শন না করার জন্য ব্যবহৃত হয়।
  • hidden – hidden border তৈরি করার জন্য ব্যবহৃত হয়।

border-style property দ্বারা একটি ইলামেন্টের চারটি বর্ডারের ( top border, right border, bottom border, এবং the left border) জন্য চার ধরণের বর্ডার সেট করা যায়:

উদাহরণ

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

ফলাফল:

A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.

নিজে নিজে চেষ্টা করুন »

বি:দ্র: যদি border-style property সেট না করা হয় তবে অন্যান্য কোনো বর্ডার প্রপার্টি কাজ করবে না। সুতরাং, বর্ডার প্রপার্টি ব্যবহার করার সময় border-style property সেট করবেন।


Border Width

border-width property ব্যবহার করে ইলামেন্টের বর্ডারের প্রস্থা বা পুরুত্ব সেট করা হয়।

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

border-width property চার ধরণের বর্ডারের জন্য ব্যবহার করা যায়। যেমন, top border, right border, bottom border, এবং left border ।

5px border-width

Code Example

<style>
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Border এর রং

border-color property ব্যবহার করে বর্ডারের রং সেট করা হয়।

নিম্নোক্ত উপায়ে বর্ডারে রং সেট করা যায়:

  • name দিয়ে, যেমন – “red”
  • Hex কোড দিয়ে, যেমন – “#ff0000”
  • RGB কোড দিয়ে, যেমন – “rgb(255,0,0)”
  • transparent বা স্বচ্ছ

যদ border-color প্রপার্টি সেট না করা হয়, তবে এটি ইলামেন্টের রংকে বর্ডারের রং হিসেবে ব্যবহার করে।

লাল রংয়েল বর্ডার

Code Example

<style>
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


প্রতিটি সাইডের জন্য পৃথক পৃথক বর্ডার

উপরের উদাহরণে দেখেছেন, প্রতিটি সাইডের জন্য পৃথক পৃথকভাবে বর্ডার সেট করা যায়। তাদের রং যেমন আলাদাভাবে সেট করা যায়, বর্ডার স্টাইলও সেট করা যায়।

বিভিন্ন বর্ডার স্টাইল

Code Example

<style>
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


এটির ফলাফলও আগেরটির মতই:

Code Example

<style>
p {
    border-style: dotted solid;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিচে দেখানো হলো এটি কিভাবে কাজ করে:

border-style property এর চারটি মানের ক্ষেত্রে:

  • border-style: dotted solid double dashed;
    • top border টি dotted
    • right border টি solid
    • bottom border টি double
    • left border টি dashed

border-style property এর তিনটি মানের ক্ষেত্রে:

  • border-style: dotted solid double;
    • top border টি dotted
    • right ও left border দুটি solid
    • bottom border টি double

border-style property এর দুটি মানের ক্ষেত্রে:

  • border-style: dotted solid;
    • top ও bottom border দুটি dotted
    • right ও left border দুটি solid

border-style property এর একটি মানের ক্ষেত্রে:

  • border-style: dotted;
    • চারটি বর্ডারই এক্ষেত্রে dotted

উপরের উদাহরণে border-style property এর ব্যবহার দেখানো হলো। তবে মনে রাখবেন, এটি একই সাথে border-width ও border-color property এর সাথে কাজ করে।


Border – Shorthand Property

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

border property ব্যবহার করে একই সাথে একাধিক প্রপার্টির মান সেট করা যায়:

  • border-width
  • border-style (required)
  • border-color

উদাহরণ

p {
border: 5px solid red;
}

Result:

Some text

নিজে নিজে চেষ্টা করুণ »

আবার শুধুমাত্র একটি বর্ডারও সেট করা যায়।

Left Border

p {
border-left: 6px solid red;
background-color: lightgrey;
}

ফলাফল:

Some text

নিজে নিজে চেষ্টা করুন »

Bottom Border

p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

ফলাফল :

Some text

নিজে নিজে চেষ্টা করুন »


Rounded Borders

border-radius property দিয়ে কোনো ইলামেন্টের রাউন্ডেড বর্ডার তৈরি করা হয়:

Normal border

Round border

Rounder border

Roundest border

উদাহরণ

p {
border: 2px solid red;
border-radius: 5px;
}

নিজে নিজে চেষ্টা করুণ »

লক্ষ্যনীয়: IE8 এবং এর আগের ভার্শনের border-radius property সাপোর্টেড নয়।


All CSS Border Properties

Property বর্ণনা
border একটি declaration -এ সবগুলো প্রপার্টি সেট করার জন্য ব্যবহৃত হয়।
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 চারটি বর্ডারের প্রস্থ সেট করার জন্য ব্যবহৃত হয়।