فصل نهم: کار با Border (حاشیه) و Rounded Corner (گوشه‌های گرد) در CSS

حاشیه‌ها و گوشه‌های گرد باعث جذابیت و حرفه‌ای‌تر شدن ظاهر عناصر وب می‌شوند. در این فصل یاد می‌گیریم چطور انواع حاشیه و گوشه گرد بسازیم.

---

۱. تنظیم حاشیه (border)

ویژگی‌های مهم border:

• border-width: ضخامت حاشیه (مثلاً 2px)
• border-style: نوع خط حاشیه (solid, dashed, dotted, double, groove …)
• border-color: رنگ حاشیه

مثال:

.box1 {
  border-width: 2px;
  border-style: solid;
  border-color: #1976d2;
}

کار راحت‌تر: استفاده از shorthand:

.box2 {
  border: 3px dashed #f44336;  /* ضخامت - نوع - رنگ */
}

---

۲. حاشیه مختص یک سمت

می‌توان فقط برای یک سمت حاشیه تعیین کرد:

• border-top
• border-right
• border-bottom
• border-left

مثال:

.sep {
  border-bottom: 2px dotted #ff9800;
}

---

۳. گوشه‌های گرد (border-radius)

کاربردی برای ساخت دکمه، کارت یا تصویر گرد:

.rounded {
  border: 2px solid #8bc34a;
  border-radius: 12px;
}

• border-radius: 50% برای کاملاً دایره‌ای شدن یک عنصر مربعی.

---

۴. ترکیب با تصویر یا پس‌زمینه

حاشیه همراه با تصویر زمینه هم قابل استفاده است:

.img-demo {
  border: 4px double #2196f3;
  border-radius: 25px;
  background: #e3f2fd url('https://www.w3schools.com/css/img_lights.jpg') no-repeat center/cover;
}

---

۵. مثال کامل

<div class="border-demo">Nice Border & Rounded Corners!</div>

.border-demo {
  width: 260px;
  text-align: center;
  padding: 16px;
  border: 3px solid #00bcd4;
  border-radius: 18px;
  margin: 10px auto;
  background-color: #e0f7fa;
  font-size: 1.1rem;
}

---

تمرین

1. یک div بساز و حاشیه‌های مختلف (رنگ، ضخامت، نقطه‌چین یا خط‌چین) را تست کن.
2. مقدار border-radius را تغییر بده تا تفاوتش رو ببینی.
3. یک عکس گرد یا دکمه‌ی با گوشه‌های گرد درست کن!

---

نکات سریع border-radius:

• مقادیر مختلف برای هر گوشه:
  border-radius: 12px 50px 15px 5px;
  (بالاچپ، بالاراست، پایین‌راست، پایین‌چپ)
• برای دایره شدن کامل یک عکس:
  عکس رو با کلاس CSS و border-radius: 50% استایل بده.