از آن ویژگی 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;

همانطور که تصویر زیر نشان می دهد می قدرت از آن موضوع بهره بری و استفاده کرد و همچنین انحنای مرتبط به هر گوشه دلخواه را به صورت بیضوی شکل ترسیم کرد:

مقادیر درصدی جهت ساخت دایره و همچنین بیضی مفید خواهند بود. به عنوان نمونه در صورتی که عرض و همچنین ارتفاع یک عنصر برابر باشند و همچنین مقدار ۵۰% به ویژگی 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.

پشتیبانی نرم افزار مرورگر اینترنتی ها