آموزش کامل ویژگی Border و کاربردهای آن در CSS

در مدل جعبه‌ای (Box Model)، حاشیه (Border) فضایی است که بین Padding و Margin قرار می‌گیرد و دور تا دور محتوای عنصر را احاطه می‌کند.

ویژگی‌های Border در CSS

ویژگی‌های Border به شما این امکان را می‌دهند که ظاهر مرزهای یک عنصر را تعیین کنید. این ظاهر می‌تواند شامل سبک‌های مختلف (مانند خط ممتد، نقطه‌چین، دوخطی و غیره) یا حتی یک تصویر باشد. در ادامه به بررسی سه ویژگی اصلی یعنی ضخامت (border-width)، سبک (border-style) و رنگ (border-color) می‌پردازیم.

۱. ویژگی border-width

این ویژگی ضخامت حاشیه را تعیین می‌کند. border-width یک ویژگی مختصرنویسی (Shorthand) است که می‌تواند ضخامت هر چهار طرف عنصر را به صورت همزمان تنظیم کند.

• مقادیر: می‌تواند به صورت عددی (با واحد px، em و...) یا مقادیر پیش‌فرض (thin ،medium ،thick) باشد.
• نکته: اگر این مقدار مشخص نشود، مقدار پیش‌فرض آن یعنی medium در نظر گرفته می‌شود.

مثال:

p {
  /* ترتیب: بالا، راست، پایین، چپ */
  border-width: medium 10px thick 15px;
}

۲. ویژگی border-style

این ویژگی نوع خطِ حاشیه را مشخص می‌کند. این مهم‌ترین ویژگی حاشیه است، زیرا بدون تعریف آن (به دلیل مقدار پیش‌فرض none) هیچ حاشیه‌ای نمایش داده نخواهد شد.

مقادیر رایج:

• none: بدون حاشیه.
• hidden: حاشیه مخفی (مشابه none).
• solid: خط صاف و ممتد.
• dashed: خط‌چین (تکه تکه).
• dotted: نقطه‌چین.
• double: دو خطی.
• groove: حالت برآمده (سه بعدی).
• ridge: حالت برجسته (سه بعدی).
• inset: حالت فرورفته (سه بعدی).
• outset: حالت بیرون‌زده (سه بعدی).

مثال:

p {
  border-style: dotted;
}

۳. ویژگی border-color

این ویژگی رنگ حاشیه را تعیین می‌کند. این ویژگی نیز یک Shorthand برای تنظیم رنگ هر چهار سمت عنصر است.

• نکته مهم: ویژگی border-color به تنهایی عمل نمی‌کند. حتماً باید قبل از آن یا همراه با آن، ویژگی border-style تعریف شده باشد تا حاشیه دیده شود.

مثال:

p {
  border-style: solid;
  border-color: #ff0000; /* قرمز */
}

۴. ویژگی مختصرنویسی border (Shorthand)

برای جلوگیری از طولانی شدن کد، می‌توان تمام ویژگی‌های بالا (ضخامت، سبک و رنگ) را در یک خط و تحت ویژگی border تعریف کرد.

مثال:

p {
  border: 5px solid #ff4500;
}

نکات مهم در مختصرنویسی:

۱. ترتیب مقادیر: ترتیب استاندارد معمولاً border-width ،border-style و سپس border-color است، اما جابجایی آن‌ها مشکلی ایجاد نمی‌کند. ۲. مقادیر حذف شده: اگر یکی از مقادیر نوشته نشود، مقدار پیش‌فرض آن اعمال می‌شود. ۳. رنگ پیش‌فرض: اگر رنگ را در ویژگی border ننویسید، مرورگر از رنگ متن عنصر (color) برای حاشیه استفاده می‌کند.

مثال (استفاده از رنگ متن برای حاشیه):

p {
  color: black;
  border: 5px solid; /* رنگ حاشیه به صورت خودکار سیاه می‌شود */
}

۴. عدم نمایش حاشیه: اگر مقدار border-style حذف شود، حاشیه نمایش داده نمی‌شود؛ زیرا مقدار پیش‌فرض آن none است.

مثال (بدون نمایش حاشیه):

p {
  /* به دلیل نبودن style، حاشیه‌ای نمایش داده نمی‌شود */
  border: 5px #00ff00; 
}