ওয়েব ডিজাইন CSS Part-8(CSS Border) - প্রিয়লেখা

ওয়েব ডিজাইন CSS Part-8(CSS Border)

Md. Sajal
Published: September 28, 2016

CSS Border:

border ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান। HTML  এবং CSS  ব্যবহার করে বিভিন্ন ধরণের border তৈরি করা যায়।
বিভিন্ন ধরণের border তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে-

  • Border Style
  • Border Width
  • Border Color
  • Individual Border

Border Style

Border স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে। CSS  ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়-

border-style:dotted ;
border-style:dashed;
border-style:double;
border-style:inset;
border-style:outset;

Border Width

বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে। CSS  ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়-

border-width:15px;
border-width:thin;
border-width:2px 8px 6px 4px;

Border Color

বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে। CSS  ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়-

border-color:yellow;
border-color:#ff0000;
border-color:#a03090 #f00000 #C06000 #0030F0;

 Individual Border 

কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে-

border-top:dotted 8px #F00 ;
border-left:solid 5px #960;

Project:

<!DOCTYPE html>
<html>
<head>
<style>
#borderone{
border-top:dotted 8px #F00 ;
border-right:dashed 6px #F60 ;
border-bottom:double 6px #C09;
border-left:solid 5px #960;
}
</style>
</head>
<body>

<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id=”borderone”>Here, the middle sections of the image are repeated to create the border.</p>

</body>
</html>

Project Border Image :

<!DOCTYPE html>
<html>
<head>
<style>
#borderone{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id=”borderone”>Here, the middle sections of the image are repeated to create the border.</p>

</body>
</html>