از ویژگی border-bottom-right-radius جهت گرد کردن گوشه پایین و همچنین سمت راست یک عنصر بهره بری و استفاده می می شود.

آن ویژگی یک یا دو مقدار می پذیرد که آن مقادیر شعاع های یک چهارم شکل بیضویی که نحوه ترسیم لبه بیرونی حاشیه عنصر را مشخص کردن می کند, مشخص می کنند (تصویر زیر بهتر آن موضوع را گفتن می کند). اولین مقدار مرتبط به شعاع افقی و همچنین دومین مقدار مرتبط به شعاع عمودی می باشد. در صورتی که مقدار دوم مشخص کردن نشود, مقدار آن هم آن هم مقدار و اندازه مقدار اول در نظر گرفته می می شود. در صورتی که هر دو مقدار صفر باشند, گوشه عنصر گرد نخواهد شد. در صورتی که مقدایر به صورت درصدی مشخص شوند, جهت مقدار افقی, آن مقدار به عرض عنصر و همچنین جهت مقدار عمودی به ارتفاع آن هم بر می گردد. همچنین مقادیر منفی قابل قبول نمی باشند.

و همچنین در صورتی که مقادیر, برابر در نظر گرفته شوند, پس نتیجه آن می شود که گوشه ای کاملا گرد خواهد بود و همچنین نه بصورت بیضوی:

border-bottom-right-radius: 50px; /* 50px 50px */

در صورتی که عنصری شامل پس باره ای از نوع تصویر یا رنگ باشد, آن هم پس باره هم نسبت به border-radius برش می خورد:

نقطه مهم آنکه گاهی آن امکان وجود دارد که رنگ پس باره به بیرون ناحیه منحی نشت کند, که جهت جلوگیری از آن موضوع می توانید از ویژگی background-clip بهره بری و استفاده کنید.

.element 
border-radius: 25px;
background-clip: padding-box;

همچنین در صورتی که عنصری حاشیه عکسی (border-image) داشته باشد, حاشیه عکسی نسبت به انحنا برش نمی خورد.

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

ناحیه بیرون از انحنا, قابل کلیک کردن و همچنین غیره, به عنوان قسمتی از عنصر نخواهد بود.

 
تغییر مقادیر آن ویژگی در دموی زیر به درک بهتر موضوع کمک می کند:

See the Pen border-bottom-right-radius by Mojtaba Seyedi (@seyedi) on CodePen.

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