دستور border در css

از دستور border برای ایجاد کادراستفاده می شود.

برای اینکه کادری را دور یک عنصر بیاندازیم از دستور BORDER استفاده می کنیم.

دستور BORDER دارای سه ویژگی می باشد.

BORDER-STYLE

نوع خط را مشخص می کند که یک خط ساده باشد یا نقطه و غیره که در مثال پایین خواهید دید.

BORDER-WIDTH

اندازه یا ضخامت لبه

BORDER-COLOR

رنگ کادر را مشخص می کند.

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<h2>SH711.COM</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

در مثال پایین هم بصورت تفکیکی و هم بصورت ترکیبی از دستور border استفاده می کنیم.

می توانیم بصورت ترکیبی هم از دستور استفاده نماییم.

<!DOCTYPE html>
<html>
<head>
<style>
.p1{
border-style: dashed;
border-width: 5px;
border-color: red;
}
.p2{
border: 4px solid blue;
}
</style>
</head>
<body>
<h2>SH711.COM</h2>
<p class="p1">BORDER STYLE + WIDTH + COLOR</p>
<p class="p2">border tarkibi</p>
</body>
</html>

دستور border را می توانیم به چهار قسمت تقسیم نماییم. یعنی بالا - راست - پایین و چپ بعضی مواقع فقط نیاز است که مثلا زیر یک عنصر خط کشیده شود. مثال زیر را ببینید:

<!DOCTYPE html>
<html>
<head>
<style>
.p1{
border-left:8px solid green;
}
.p2{
border-bottom: 4px solid blue;
}
</style>
</head>
<body>
<h2>SH711.COM</h2>
<p class="p1">BORDER STYLE + WIDTH + COLOR</p>
<p class="p2">border tarkibi</p>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css کد css
عضویت طلایی
ثبت نظر