گردی گوشه (Border Radius) در CSS
حاشیهٔ تیز دور جعبه را بلدید. خیلی وقت‌ها طرح گوشهٔ نرم‌تر می‌خواهد — کارت دوستانه، دکمهٔ امروزی، آواتاری که دایره خوانده شود. کار border-radius همین است: هر گوشه چقدر خم شود.
border-radius چه می‌کند؟
border-radius گوشه‌های جعبهٔ حاشیه را گرد می‌کند. خم روی خط حاشیه و پس‌زمینه می‌نشیند (و معمولاً برش تصویر/overflow هم). طول بزرگ‌تر یعنی گوشه گردتر. واحد رایج px یا % است.
یک مقدار — هر چهار گوشه
شروع روزمره: یک طول برای همهٔ گوشه‌ها.
شعاع یکسان روی همهٔ گوشه‌ها
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}چه چیزی را باید ببینید؟
حاشیه از خم پیروی می‌کند و پر سفید داخل شکل گرد می‌ماند. Radius حاشیهٔ دوم نیست — شکل همان جعبه را عوض می‌کند.
میان‌بر: چند مقدار؟
می‌توانید یک، دو، سه یا چهار طول بدهید. ترتیب گوشه‌ها ثابت است.
📊 شمارش مقدارهای border-radius
| تعداد | معنی | نکتهٔ روزمره |
|---|---|---|
| ۱ | هر چهار گوشه یکسان | کارت و پنل نرم |
| ۲ | بالا-چپ + پایین-راست، بعد بالا-راست + پایین-چپ | جفت قطری |
| ۳ | بالا-چپ، بالا-راست + پایین-چپ، پایین-راست | کمتر رایج — وجودش را بشناسید |
| ۴ | بالا-چپ، بالا-راست، پایین-راست، پایین-چپ | کنترل کامل، ساعت‌گرد از بالا-چپ |
چهار گوشه، چهار عدد
وقتی هر گوشه شعاع خودش را می‌خواهد، چهار مقدار را ساعت‌گرد از بالا-چپ بنویسید.
چهار گوشهٔ متفاوت
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}دو مقدار — جفت‌های قطری
دو طول گوشه‌های روبه‌رو را جفت می‌کند: اولی بالا-چپ و پایین-راست؛ دومی بالا-راست و پایین-چپ.
شعاع دو مقداری قطری
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}دکمهٔ کپسولی
شعاع بزرگ (اغلب حدود نصف ارتفاع، یا مقدار درشتی مثل 999px) مستطیل را به کپسول تبدیل می‌کند — برای چیپ و اقدام اصلی رایج است.
دکمهٔ کپسولی
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}آواتار دایره
برای دایرهٔ واقعی، به جعبه عرض و ارتفاع برابر بدهید، بعد border-radius: 50%. روی جعبهٔ غیرمربع، 50% بیضی می‌سازد نه دایره.
دایره با شعاع ۵۰ درصد
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* عکس داخل دایره بریده می‌شود */
}خودتان امتحان کنید
- کارت حاشیه‌دار را با
border-radius: 12pxنرم کنید. - بج با چهار شعاع گوشهٔ متفاوت.
- روی کاشی شعاع دو مقداری بگذارید و جفت قطری را ببینید.
- دکمهٔ کپسولی با
border-radius: 999px. - آواتار ۶۴×۶۴ با
border-radius: 50%— بعد همان50%را روی مستطیل پهن بگذارید و مقایسه کنید.
اشتباهات رایج
- شعاع خیلی بزرگ روی جعبهٔ خالی بدون حاشیه و رنگ، و تعجب که «چیزی دیده نمی‌شود»
50%روی مستطیل پهن و انتظار دایرهٔ کامل (بیضی می‌گیرید)- برای دایره، برابر نبودن عرض و ارتفاع
- فکر کردن که
border-radiusجایborderرا می‌گیرد — برای دیدن خم، هنوز حاشیه یا پر لازم است - قاطی کردن ترتیب گوشه‌ها (چهار مقدار: ساعت‌گرد از بالا-چپ)
خلاصه
border-radiusگوشه‌های جعبه را گرد می‌کند- یک مقدار همه را نرم می‌کند؛ چهار مقدار هر گوشه را جدا کنترل می‌کند
- دو مقدار گوشه‌های روبه‌رو را قطری جفت می‌کند
- شعاع بزرگ کپسول می‌سازد؛
50%روی مربع دایره می‌شود - خم، حاشیه و پس‌زمینه را با هم برش می‌دهد
- کارت، کپسول و آواتار را تمرین کنید تا شکل‌ها بدیهی شوند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود