Border و Border Radius

خط دور جعبه و گردی گوشه‌ها: Border و Border Radius

در فصل ۴ با Border به‌عنوان یکی از چهار لایه Box Model آشنا شدیم و دیدیم چطور ضخامت، سبک و رنگش رو تعریف کنیم. حالا وقتشه این مفهوم رو کامل‌تر ببینیم، هر جهت رو جداگانه کنترل کنیم، و با Property به اسم border-radius هم آشنا بشیم که امکان گرد کردن گوشه‌های جعبه رو فراهم می‌کنه.

مرور سریع: شورت‌هند border

.box {
  border: 2px solid #333;
}

همون‌طور که در فصل ۴ دیدیم، این شورت‌هند از سه بخش تشکیل شده: ضخامت (border-width)، سبک خط (border-style) و رنگ (border-color).

انواع border-style

.solid {
  border: 3px solid black;
}

.dashed {
  border: 3px dashed black;
}

.dotted {
  border: 3px dotted black;
}

.double {
  border: 5px double black;
}

.groove {
  border: 5px groove gray;
}

مقدار	ظاهر
solid	خط ممتد و یکپارچه
dashed	خط‌چین با فاصله‌های منظم
dotted	نقطه‌چین
double	دو خط موازی
groove / ridge / inset / outset	جلوه‌های سه‌بعدی با استفاده از سایه‌روشن مصنوعی
none	بدون هیچ بوردری (مقدار پیش‌فرض)

نکته مهم: بدون تعریف border-style، حتی اگه border-width و border-color هم تعریف شده باشن، هیچ بوردری نمایش داده نمی‌شه؛ چون مقدار پیش‌فرض border-style برابر none است.

کنترل مستقل هر جهت

.box {
  border-top: 3px solid red;
  border-right: 1px solid gray;
  border-bottom: 3px solid red;
  border-left: 1px solid gray;
}

دقیقاً مثل Padding و Margin که در فصل ۴ دیدیم، Border هم می‌تونه برای هر جهت (بالا، راست، پایین، چپ) به‌طور کاملاً مستقل تعریف بشه. این تکنیک برای طراحی‌هایی مثل یک خط جداکننده فقط زیر یک تیتر، یا یک نوار رنگی فقط در سمت چپ یک کارت، بسیار رایجه.

کنترل تک‌تک ویژگی‌های یک جهت

.box {
  border-top-width: 4px;
  border-top-style: dashed;
  border-top-color: teal;
}

می‌شه حتی از این هم دقیق‌تر شد و هر یک از سه ویژگی (Width، Style، Color) رو برای یک جهت خاص، کاملاً مستقل تعریف کرد.

border-radius: گرد کردن گوشه‌ها

.rounded {
  border: 2px solid navy;
  border-radius: 12px;
}

Property به اسم border-radius شعاع گردی گوشه‌های یک جعبه رو مشخص می‌کنه. هرچه این مقدار بزرگ‌تر باشه، گوشه‌ها گردتر به‌نظر می‌رسن.

ساخت یک دایره کامل

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
}

یکی از رایج‌ترین کاربردهای border-radius، ساخت یک دایره کامل از یک جعبه مربعی‌ست. وقتی مقدار border-radius برابر 50% (یا هر مقدار بزرگ‌تر یا مساوی نصف عرض/ارتفاع) باشه، و عرض و ارتفاع جعبه با هم برابر باشن، نتیجه یک دایره کاملاً متقارن خواهد بود.

کنترل مستقل هر گوشه

.custom-corners {
  border-top-left-radius: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 5px;
}

دقیقاً مشابه بقیه Propertyهای Border، می‌شه هر گوشه رو هم به‌طور کاملاً مستقل و با مقدار متفاوت گرد کرد؛ این تکنیک برای طراحی‌های نامتقارن و خلاقانه‌تر کاربرد داره.

شورت‌هند border-radius با چهار مقدار

.box-a {
  border-radius: 10px;
}

.box-b {
  border-radius: 10px 20px;
}

.box-c {
  border-radius: 10px 20px 30px 40px;
}

شورت‌هند border-radius دقیقاً همون الگوی ساعت‌گرد رو دنبال می‌کنه که در فصل ۴ برای Margin و Padding دیدیم، ولی این‌بار برای گوشه‌ها به‌جای جهت‌ها: بالا-چپ، بالا-راست، پایین-راست، پایین-چپ. برای .box-b، مقدار اول (بالا-چپ و پایین-راست) و مقدار دوم (بالا-راست و پایین-چپ) رو مشخص می‌کنه.

مقادیر بیضی‌شکل با اسلش

.elliptical {
  border-radius: 50px / 20px;
}

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

ترکیب border و border-radius: یک کارت رایج

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

این الگو، یکی از پرکاربردترین ترکیب‌ها در طراحی رابط کاربری مدرنه: یک بوردر نازک و ملایم، همراه با گوشه‌های کمی گرد، برای ساخت ظاهر یک کارت تمیز و امروزی.

Border بدون رنگ مشخص: نقش currentColor

.box {
  color: darkgreen;
  border: 2px solid;
}

همون‌طور که در فصل ۷ با currentColor دیدیم، اگه border-color رو مشخص نکنیم، به‌طور پیش‌فرض همون رنگ متن (color) همون عنصر رو می‌گیره؛ در این مثال، بوردر به‌طور خودکار darkgreen خواهد بود.

نکات مهم

• بدون تعریف border-style، هیچ بوردری نمایش داده نمی‌شود، حتی اگر width و color هم تعریف شده باشند.
• border-radius: 50% روی یک جعبه با عرض و ارتفاع برابر، یک دایره کامل می‌سازد.
• هر جهت border و هر گوشه border-radius، می‌تواند به‌طور کاملاً مستقل تعریف شود.

اشتباهات رایج

• فراموش کردن border-style، در حالی که width و color تعریف شده‌اند؛ که نتیجه‌اش عدم نمایش هیچ بوردری است.
• تلاش برای ساخت دایره با border-radius: 50% روی جعبه‌ای که عرض و ارتفاع برابر ندارد؛ که نتیجه‌اش یک بیضی خواهد بود، نه دایره.
• قاطی کردن ترتیب مقادیر در شورت‌هند border-radius چهارمقداری (که ترتیبش با Padding و Margin یکسان است، ولی برای گوشه‌ها نه جهت‌ها).

جمع‌بندی

Border از سه ویژگی اصلی (Width، Style، Color) تشکیل شده که هرکدام می‌توانند به‌طور مستقل برای هر جهت (بالا، راست، پایین، چپ) تعریف شوند. Property به اسم border-radius امکان گرد کردن گوشه‌های جعبه، از یک گردی جزئی تا یک دایره کامل، را فراهم می‌کند و می‌تواند برای هر گوشه به‌طور مستقل یا با مقادیر بیضی‌شکل تنظیم شود.