خاصیت های Border به شما این مکان را می دهند که style ، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.

نکته:

توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت Border-style مقداردهی نشدهباشند، تاثیری نخواهند داشت.

مقادیر Border-style

  • None هیچ حاشیه ای تعریف نمی شود.
  •  Dotted حاشیه ی نقطه چین تعریف می کند.
  •  Dashed حاشیه ی خط چین تعریف می کند.
  •  Solid یک حاشیه با خط ممتد رسم می کند.
  • Double دو خط حاشیه تعریف می کند.
  •  Groove یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
  •  Ridge در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
  •  Inset این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
  •  Outset حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

ضخامت حاشیه (Border width)

با استفاده از خاصیت Border-width می توان ضخامت خط حاشیه را تنظیم کرد.
عرض  (width) یا بر حسب پیکسل تنظیم می شود و یا با بهره گیری از سه مقدار از پیش تعریف شده ی thin ،medium و thick .

نکته :

خاصیت ” Border-width “زمانی که به تنهایی بکار برده می شود، کار خاصی انجام نمی دهد. ابتدا باید بهوسیله ی خاصیت ” Border-style “خطوط حاشیه را مقدار دهی (تنظیم) کنید.

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

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

رنگ خط حاشیه  (Border color)

خاصیت border-color به منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد. رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.

Name -اسم رنگ دلخواه را مشخص می کند، مانند ” red”

RGB -یک مقدار red blue green) RGB )  تعریف می کند.

Hex- یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کند.

نکته :

چنانچه رنگ خط حاشیه مقداردهی نشده باشد، border رنگ خود را از خاصیت color مربوطه به ارث می برد.

خاصیت ” border-color “اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید درمرحله ی اول با استفاده از خاصیت ” border-style “، خطوط حاشیه را مقداردهی کنید.

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

p.two {
border-style: solid;
border-color: #98bf21;
}

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

این امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد. (برای هر طرف یک حاشیه ی متفاوت داشت)

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

مثال بالا را همچنین می توان با تنها یک خاصیت تنظیم یا مقدار دهی کرد.

p {
border-style: dotted solid;
}

خاصیت border-style می تواند از یک تا چهار مقدار را  داشته باشد.

border-style dotted solid double dashed;

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

border-style dotted solid double;

حاشیه سمت بالا نقطه چین می شود.
حاشیه های سمت راست و چپ با خط معمولی ترسیم می شوند.
حاشیه ی سمت پایین دو خطه می شود.

border-style dotted solid;

حاشیه های سمت بالا و پایین نقطه چین می گردند.
حاشیه های سمت راست و چپ با خطی معمولی کشیده می شوند.

border-style dotted;

هر چهار حاشیه با خطی معمولی تعریف می شوند.

خاصیت border-style در مثال بالا بکار گرفته شده، اگرچه قابلیت استفاده از آن با border-width وborder-color وجود نیز وجود دارد.

خاصیت Border-Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار باخطوط حاشیه باید به آن ها توجه داشت.

به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.

خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.

border-width
border-style (الزامی)
border-color

p {
border: 5px solid red;
}

 

منبع: w3school