از این ویژگی border-radius برای گرد کردن گوشه های یک عنصر استفاده می شود.
این ویژگی از نوع ویژگی های مختصر نویسی برای ویژگی های زیر می باشد که هر کدام از آنها مخصوص یک گوشه عنصر هستند:
border-radius می تواند یک تا چهار مقدار داشته باشد و اگر مقادیر را با استفاده از / از هم جدا کنیم می تواند هشت مقدار بپذیرد. که در هر سمت اسلش می تواند بین یک تا چهار مقدار وجود داشته باشد.
بدون اسلش
اگر چهار مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه بالا سمت راست, سومین مقدار مربوط به گوشه پایین سمت راست و مقدار آخر مربوط به گوشه پایین سمت چپ خواهد بود. (جهت ساعتگرد به شما برای بخاطر سپردن ترتیب کمک می کند)
اگر سه مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ, و مقدار آخر مربوط به گوشه پایین سمت راست می باشد.
اگر دو مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ و پایین سمت راست و دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ می باشد.
اگر یک مقدار داشته باشد, آن مقدار به تمام گوشه ها تعلق می گیرد و انحنای گوشه ها با هم برابر خواهد بود.
به عنوان مثال این مورد:
border-radius: 1em 3em 2em;
برابر است با:
border-top-left-radius: 1em;
border-top-right-radius: 3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 3em;
و نتیجه بصورت زیر خواهد بود:
با توجه به تصویر زیر واضح است که هر گوشه دارای انحنایی بصورت یک دایره کامل است:
این به این دلیل است که در این مثال به هر گوشه فقط یک مقدار تعلق گرفته است, اما می توان با تعیین دو مقدار برای هر گوشه, انحنا را بصورت بیضوی به وجود آورد. (یعنی یک شعاع افقی و یک شعاع عمودی). برای توضیحات بیشتر در این مورد به این مطلب مراجعه کنید.
بدون اسلش
با استفاده از اسلش می توان برای هر گوشه دو مقدار تعیین کرد. مقادیر قبل از اسلش مربوط به شعاع های افقی, و مقادیر بعد از آن مربوط به شعاع های عمودی می باشند. برای مثال:
border-radius: 2em 1em 4em / 0.5em 3em;
برابر است با:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
همانطور که تصویر زیر نشان می دهد می توان از این موضوع استفاده کرد و انحنای مربوط به هر گوشه دلخواه را به صورت بیضوی شکل ترسیم کرد:
مقادیر درصدی برای ساخت دایره و بیضی مفید هستند. به عنوان نمونه اگر عرض و ارتفاع یک عنصر برابر باشند و مقدار 50% به ویژگی border-radius آن عنصر داده شود, عنصر تبدیل به یک دایره می شود و اگر مقادیر عرض و ارتفاع برابر نباشند, نتیجه بیضی شکل خواهد بود.
اگر عنصری دارای پس زمینه ای از نوع تصویر یا رنگ باشد, آن پس زمینه هم نسبت به border-radius برش می خورد:
نکته مهم اینکه گاهی این امکان وجود دارد که رنگ پس زمینه به بیرون ناحیه منحی نشت کند, که برای جلوگیری از این موضوع می توانید از ویژگی background-clip استفاده کنید.
.element {
border-radius: 25px;
background-clip: padding-box;
}
همچنین اگر عنصری حاشیه تصویری (border-image) داشته باشد, حاشیه تصویری نسبت به انحنا برش نمی خورد.
نکته دیگر اینکه اگر عنصر مقدار مناسبی padding برای اینکه محتوا را به سمت داخل هول دهد نداشته باشد, این امکان وجود دارد که محتوا از عنصر بیرون بزند:
ناحیه بیرون از انحنا, قابل کلیک کردن و غیره, به عنوان قسمتی از عنصر نخواهد بود.
تغییر مقادیر این ویژگی در دموی زیر به درک بهتر موضوع کمک می کند:
See the Pen border-radius by Mojtaba Seyedi (@seyedi) on CodePen.
انحنای گوشه های یک عنصر نباید روی هم قرار بگیرند. زمانی که مجموع انحنای دو گوشه مجاور بیشتر از اندازه عنصر شود, مرورگر باید به نسبت از مقدار انحنای تمام گوشه ها کم کند تا هیچ کدام از آنها روی هر قرار نگیرند.
در دموی زیر که با Sass نوشته شده است می توانید با تغییر مقادیر متغیرها در بالای کد درک بهتری نسبت به عملکرد این ویژگی پیدا کنید:
See the Pen border-radius helper by Mojtaba Seyedi (@seyedi) on CodePen.
خیلی عالی توضیح دادین