سایتتان را نرم کنید: گوشه‌های گرد و مدرن بسازید

Border Radius: گرد کردن گوشه‌ها با ظرافت! 🌸

سلام دوستان عزیز! تا اینجا با مدل جعبه‌ای CSS، padding، border، margin و پس‌زمینه‌ها حسابی کار کردیم. حالا وقتشه که یه کم ظرافت به طرح‌هامون اضافه کنیم! با خصوصیت `border-radius` می‌تونیم گوشه‌های تیز عناصر رو گرد کنیم و یه ظاهر نرم‌تر و دلنشین‌تر بهشون بدیم. بیاین ببینیم چطوری! 😉

1. `border-radius`: گرد کردن گوشه‌ها 💫

این خصوصیت به شما اجازه می‌ده شعاع منحنی گوشه‌ها رو تعیین کنین. هر چقدر مقداری که می‌دین بیشتر باشه، گوشه‌ها گردتر می‌شن. می‌تونین از مقادیر زیر استفاده کنین:

• پیکسل (px): مقدار ثابت برای شعاع.
• درصد (%): نسبت به اندازه عنصر.
• واحد em یا rem: نسبت به اندازه فونت.

مثال پایه:

.rounded-corners {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid blue;
  padding: 15px;

  border-radius: 15px; /* همه گوشه‌ها با شعاع 15 پیکسل گرد می‌شن */
}

.more-rounded {
  border-radius: 30px; /* گوشه‌ها خیلی گردتر */
}

.pill-shape {
  /* اگه ارتفاع عنصر رو داشته باشیم، می‌تونیم یه شکل کپسولی بسازیم */
  border-radius: 50px; /* مقدار بزرگتر از نصف ارتفاع */
}

.circle-shape {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  border-radius: 50%; /* با 50% دایره کامل می‌شه */
}

برای ساخت دایره کامل، عرض و ارتفاع عنصر باید برابر باشن و `border-radius` رو روی 50% تنظیم کنین.

2. گرد کردن گوشه‌های خاص 📐

اگه بخواین فقط یه گوشه یا چند تا گوشه خاص رو گرد کنین، می‌تونین از خصوصیت‌های جداگانه استفاده کنین:

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

مثال:

.top-left-rounded {
  border-top-left-radius: 25px; /* فقط گوشه بالا سمت چپ گرد می‌شه */
}

.specific-corners {
  border-top-right-radius: 10px;
  border-bottom-left-radius: 30px; /* دو گوشه مخالف */
}

این خصوصیت‌ها خیلی مفید هستن وقتی می‌خواین یه شکل نامتقارن و خاص بسازین.

3. مختصرنویسی `border-radius`: جادوی چهار جهت! 🪄

مثل `padding` و `margin`، برای `border-radius` هم می‌تونیم از مختصرنویسی استفاده کنیم تا چهار گوشه رو به صورت جداگانه کنترل کنیم. این روش کمی پیچیده‌تره اما خیلی قدرتمنده.

اگه فقط یک مقدار بدین، همونطور که دیدیم، برای هر چهار گوشه اعمال می‌شه.

نحوه مختصرنویسی با چهار مقدار:

مقادیر به ترتیب عقربه‌های ساعت اعمال می‌شن: بالا-چپ، بالا-راست، پایین-راست، پایین-چپ.

.multi-radius {
  border-radius: 10px 20px 30px 40px;
  /* 10px بالا-چپ */
  /* 20px بالا-راست */
  /* 30px پایین-راست */
  /* 40px پایین-چپ */
}

.two-values {
  border-radius: 10px 30px;
  /* 10px بالا-چپ و پایین-راست */
  /* 30px بالا-راست و پایین-چپ */
}

.three-values {
  border-radius: 10px 20px 30px;
  /* 10px بالا-چپ */
  /* 20px بالا-راست و پایین-چپ */
  /* 30px پایین-راست */
}

این مختصرنویسی چهار مقداری، شبیه مختصرنویسی‌های padding و margin هست. اگه با اون‌ها راحت باشین، این هم براتون آسون می‌شه.

4. گرد کردن بیضوی (Elliptical Radius) 🥚

این یه قابلیت خیلی باحال و پیشرفته‌تره! می‌تونین برای هر گوشه، دو شعاع تعریف کنین که یه منحنی بیضوی بسازه. برای این کار، از یه اسلش (/) استفاده می‌کنیم:

قالب: border-radius: [X-radius] / [Y-radius];

.elliptical-rounded {
  /* برای همه گوشه‌ها */
  border-radius: 40px / 80px;
  /* یعنی شعاع افقی 40px و شعاع عمودی 80px برای هر گوشه */
}

.mixed-elliptical {
  /* ترکیبی از مقادیر */
  border-radius: 10px 50px 10px 50px / 10px 10px 50px 50px;
  /* اولی بالا-چپ */
  /* دومی بالا-راست */
  /* ... و الی آخر */
}

این یعنی برای هر گوشه، می‌تونین یه شعاع افقی و یه شعاع عمودی متفاوت تعیین کنین که یه منحنی بیضوی ایجاد می‌کنه.

گرد کردن بیضوی به شما انعطاف‌پذیری خیلی بالایی می‌ده و می‌تونین اشکال کاملاً سفارشی و خلاقانه‌ای بسازین.

`border-radius` ابزاری ساده اما بسیار تاثیرگذاره برای زیباتر کردن عناصر. با تمرین کردن مقادیر مختلف و مختصرنویسی‌ها، می‌تونین به راحتی ظاهر کارت‌ها، دکمه‌ها، عکس‌ها و خیلی چیزهای دیگه رو چشم‌نوازتر کنین! 💖