مرز و گردی گوشه‌ها در CSS — راهنمای جامع

مرزها (borders) و گردی گوشه‌ها (border-radius) از اجزای پایه طراحی رابط کاربری هستند که به سرعت می‌توانند ظاهر عناصر را نرم‌تر، مدرن‌تر و کاربرپسندتر کنند. در این مقاله به صورت گام‌به‌گام مفاهیم، نحوه استفاده، مثال‌های واقعی و نکات پیشرفته برای کار با border و border-radius در CSS را بررسی می‌کنیم.

مبانی: خواص مرز (border)

• border-width: ضخامت مرز (مثلاً 1px, 0.2em)
• border-style: نوع خط (solid, dashed, dotted, none, inset، و …)
• border-color: رنگ مرز
• border: شورت‌هند برای ترکیب سه مورد بالا

/* مثال پایه */.button {
  border: 2px solid #2b6cb0;
  padding: 8px 14px;
  background: white;
  color: #2b6cb0;
}

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

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

خاصیت border-radius به شما امکان می‌دهد گوشه‌های عنصر را گرد کنید. مقدار می‌تواند بر حسب پیکسل، درصد یا ترکیبی از مقادیر باشد.

/* مقدار یکنواخت برای همه گوشه‌ها */.box {
  border-radius: 8px;
}

/* گرد کامل (دایره) */.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

در مثال اول تمامی گوشه‌ها 8px گرد می‌شوند. در مثال دوم مقدار 50% باعث می‌شود اگر عرض و ارتفاع برابر باشند عنصر به شکل دایره درآید؛ overflow: hidden تضمین می‌کند تصویری که داخل عنصر قرار می‌گیرد از گوشه‌ها بیرون نزند.

گوشه‌های جداگانه و شعاع‌های بیضوی

می‌توانید برای هر گوشه مقدار جداگانه تعیین کنید و همچنین از سینتکس بیضوی برای رفتار پیشرفته‌تر استفاده کنید.

/* گوشه‌های جداگانه (top-left, top-right, bottom-right, bottom-left) */.card {
  border-radius: 4px 12px 12px 4px;
}

/* بیضوی: افقی / عمودی */.elliptical {
  border-radius: 20px 40px / 10px 30px;
}

در مثال اول هر گوشه مقدار متفاوتی دارد. در مثال دوم بخش اول مقادیر افقی و بخش بعد از اسلش مقادیر عمودی را تعیین می‌کند؛ این امکان برای ایجاد گوشه‌های بیضوی مفید است.

نکات عملی و نمونه‌های واقعی

• برای دکمه‌های “پیل” (pill) از مقدار بزرگ مثل border-radius: 9999px استفاده کنید تا همیشه گرد شود.
• برای تصاویر آواتار، اگر تصویر خودتان عنصر img است، مستقیماً به تصویر border-radius:50% بدهید یا تصویر را در ظرفی با overflow:hidden قرار دهید.
• برای عناصر جدول و گوشه‌های گرد، از border-collapse: separate و border-spacing استفاده کنید تا گوشه‌ها به درستی نمایش داده شوند.

/* دکمه پیل */.pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid #ccc;
}

/* راند کردن گوشه‌های جدول */table.rounded {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 8px; /* برای مرورگرها کافی نیست، نیاز به تنظیم سلول‌ها */}
table.rounded td:first-child { border-top-left-radius: 8px; }
table.rounded td:last-child  { border-top-right-radius: 8px; }
/* و ادامه برای ردیف‌های آخر */

در مثال جدول به خاطر نحوه رندر جداول لازم است سلول‌ها را هم مورد هدف قرار دهید تا گوشه‌ها به درستی گرد شوند، مخصوصاً وقتی که border-collapse فعال باشد.

تعامل با پس‌زمینه و مرز (background-clip)

در برخی مواقع ممکن است مرز یا پس‌زمینه از گوشه‌های گرد بیرون بزند. برای کنترل بهتر از background-clip استفاده کنید.

.card {
  background: linear-gradient(180deg, #fff, #f7fafc);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background-clip: padding-box; /* جلوگیری از کشیده شدن پس‌زمینه درون مرز */}

با background-clip: padding-box، پس‌زمینه تا لبه داخلی مرز کشیده می‌شود و از لبه مرز بیرون نمی‌زند؛ مخصوصاً زمانی که مرز شفاف یا نیمه‌شفاف دارید مفید است.

تطبیق‌پذیری و دسترسی

• برای حالت فوکوس عناصر قابل تعامل (دکمه‌ها، لینک‌ها) بهتر است از outline یا box-shadow استفاده کنید که با گردی گوشه‌ها سازگاری داشته باشند:

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66,153,225,0.4);
  border-radius: 8px; /* هماهنگ با حالت پیش‌فرض */}

استفاده از box-shadow برای نمایش فوکوس همان حس گردی گوشه‌ها را حفظ می‌کند و برای کاربران کیبورد قابل مشاهده خواهد بود.

پیشرفته: مرزهای تصویری و clip-path

اگر بخواهید مرزهای تزئینی‌تر داشته باشید می‌توانید از border-image یا clip-path استفاده کنید. border-image اجازه می‌دهد تصویر را به عنوان مرز اعمال کنید و clip-path برای اشکال پیچیده‌تر مناسب است.

.fancy {
  border: 10px solid transparent;
  border-image: url('/path/to/frame.png') 30 round;
  border-radius: 20px;
}

در این مثال تصویر به عنوان مرز استفاده شده و با مقدار round تکرار می‌شود تا کل ناحیه پوشانده شود. توجه کنید که هماهنگی با border-radius بسته به مرورگر ممکن است متفاوت باشد.

سازگاری مرورگر و راهکارهای جایگزین

• امروزه border-radius در تمام مرورگرهای مدرن پشتیبانی می‌شود (از جمله موبایل)، بدون نیاز به پیشوندهای فروشنده.
• برای مرورگرهای بسیار قدیمی (مثلاً IE8 و پایین) باید از تصاویر یا شناسه‌های CSS جایگزین استفاده کنید.
• در صورت مشکلات رندرینگ (آنتی‌آلیاسینگ) می‌توانید از transform: translateZ(0) یا تنظیمات خاص مرورگر کمک بگیرید، هرچند معمولاً نیاز نیست.

جدول خلاصه خواص مرتبط

جمع‌بندی و بهترین شیوه‌ها

• برای طراحی مدرن از گوشه‌های ملایم (4–12px) برای عناصر استاندارد و از مقدار 50% یا 9999px برای اشکال گرد یا پیل استفاده کنید.
• همیشه تعامل فوکوس را برای دسترسی بهتر در نظر بگیرید و آن را با گردی گوشه‌ها هماهنگ کنید.
• برای اجزاء پیچیده (مانند جداول، تصاویر درون عناصر گرد) از overflow و background-clip استفاده کنید تا خروجی نهایی تمیز باشد.
• برای ثبات در پروژه‌های بزرگ از متغیرهای CSS برای شعاع‌ها استفاده کنید (مثلاً --radius-sm).

/* نمونه استفاده از متغیرها */:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
}

.card { border-radius: var(--radius-md); }
.button { border-radius: var(--radius-sm); }

در انتها توصیه می‌شود در طراحی سیستم‌های رابط کاربری از مقادیر ثابت و متمرکز برای border-radius استفاده کنید تا ظاهری همسان و نگهداری ساده‌تری داشته باشید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال