تعریف

ویژگی Border در CSS برای مشخص کردن مرز دور عناصر HTML استفاده می‌شود. مرزها نقش مهمی در طراحی وب دارند؛ چون به عناصر ساختار می‌دهند، آن‌ها را از هم جدا می‌کنند و می‌توانند جذابیت ظاهری سایت را بیشتر کنند.

در CSS می‌توان مرزها را از نظر سبک (style)، رنگ (color)، ضخامت (width) و حتی انحنای گوشه‌ها (radius) تغییر داد.

✨ خواص اصلی Border در CSS

1. border-style → تعیین نوع مرز

2. border-width → تعیین ضخامت مرز

3. border-color → تعیین رنگ مرز

4. border-radius → تعیین گردی گوشه‌ها

1) Border Style (سبک مرز)

ویژگی border-style مشخص می‌کند چه نوع مرزی نمایش داده شود.

مقادیر پرکاربرد:

مثال:

p {
  border-style: dashed;
}

2) Border Width (ضخامت مرز)

ویژگی border-width ضخامت مرز را مشخص می‌کند.

• می‌تواند به صورت پیکسل (px) یا با مقادیر آماده:

  • thin → نازک

  • medium → متوسط

  • thick → ضخیم

مثال:

div {
  border-style: solid;
  border-width: 5px;
}

3) Border Color (رنگ مرز)

ویژگی border-color رنگ مرز را مشخص می‌کند.

راه‌های تعیین رنگ:

• نام رنگ: red, blue

• کد هگز: #ff0000

• کد RGB: rgb(255,0,0)

مثال:

h1 {
  border-style: solid;
  border-width: 2px;
  border-color: green;
}

4) Border Radius (گردی گوشه‌ها)

ویژگی border-radius برای ایجاد گوشه‌های گرد استفاده می‌شود.

مثال:

img {
  border: 3px solid black;
  border-radius: 50%; /* دایره‌ای کردن تصویر */
}

📌 نکته حرفه‌ای

می‌توان همه ویژگی‌ها را در یک خط به صورت Shorthand نوشت:

div {
  border: 2px solid blue;
  border-radius: 10px;
}