Creative IT Blog Just another WordPress site
Related Articles
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>
