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

مقدمه

ویژگی border-radius در CSS به شما امکان می‌دهد گوشه‌های عناصر را گرد کنید و ظاهر جذاب‌تری به طراحی بدهید. این ویژگی برای دکمه‌ها، جعبه‌ها و تصاویر کاربرد زیادی دارد. برای یادگیری کامل CSS و استفاده حرفه‌ای از border-radius، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی border-radius

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

• گرد کردن همه گوشه‌ها با یک مقدار: border-radius: 10px;
• گرد کردن گوشه‌ها به صورت جداگانه: border-radius: 10px 20px 30px 40px;
• استفاده از درصد برای دایره‌ای کردن عناصر: border-radius: 50%;
• ترکیب با box-shadow و border-image برای جلوه‌های بصری حرفه‌ای

مثال عملی با کد

گرد کردن همه گوشه‌ها:

.box {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  border-radius: 15px;
}

گرد کردن گوشه‌ها به صورت جداگانه:

.card {
  width: 200px;
  height: 120px;
  background-color: #2ecc71;
  border-radius: 10px 20px 30px 40px;
}

دایره‌ای کردن عناصر:

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

نکات مهم و توضیحات تکمیلی

• border-radius باعث زیبایی و جذابیت طراحی می‌شود.
• استفاده از درصد مناسب برای دایره و بیضی بسیار کاربردی است.
• ترکیب border-radius با box-shadow و gradient جلوه‌های حرفه‌ای ایجاد می‌کند.
• برای طراحی واکنش‌گرا، اندازه گوشه‌ها باید با ابعاد عنصر هماهنگ باشد.

ادامه آموزش CSS

برای یادگیری بیشتر، استفاده از این ویژگی‌ها را با سایر جلوه‌های CSS ترکیب کرده و طراحی واکنش‌گرا را تمرین کنید: ادامه یادگیری در دوره CSS.