آموزش جامع CSS: چطور از حاشیه ها در CSS استفاده کنیم؟

ویژگی border در CSS برای تعریف حاشیه دور یک Element استفاده می‌شود. می‌توانید ضخامت، نوع خط و رنگ را جداگانه مشخص کنید یا هر سه را با Shorthand در یک Declaration بنویسید.

محتوا پنهان

1 ساختار اصلی Border

2 حاشیه هر سمت را جدا تنظیم کنید

3 گوشه‌های گرد با border-radius

4 Border با Outline چه فرقی دارد؟

5 ویدیوی آموزش

ساختار اصلی Border

.card {
  border: 1px solid #d0d5dd;
}

در این مثال، 1px ضخامت، solid نوع خط و مقدار رنگ بخش سوم است. می‌توانید همین ویژگی‌ها را با border-width، border-style و border-color جداگانه هم کنترل کنید.

حاشیه هر سمت را جدا تنظیم کنید

برای کنترل یک سمت مشخص از border-top، border-right، border-bottom و border-left استفاده کنید. برای Layoutهای RTL/LTR مدرن، در جاهایی که جهت منطقی مهم است می‌توانید ویژگی‌های Logical مثل border-inline-start و border-inline-end را هم در نظر بگیرید.

.section-title {
  border-bottom: 2px solid currentColor;
}

گوشه‌های گرد با border-radius

.button {
  border: 1px solid #999;
  border-radius: 8px;
}

border-radius شکل گوشه‌ها را کنترل می‌کند و مستقل از رنگ یا Style خود Border است. مقدارهای خیلی بزرگ می‌توانند یک Element مستطیلی را به Pill تبدیل کنند.

Border با Outline چه فرقی دارد؟

Border بخشی از Box Model است و روی اندازه Box اثر می‌گذارد، مگر اینکه محاسبات اندازه با box-sizing کنترل شده باشد. Outline معمولا خارج از Border رسم می‌شود و برای Focus Indicator کاربرد دارد؛ بنابراین Outline پیش‌فرض عناصر قابل Focus را بدون جایگزین مناسب حذف نکنید.