border-bottom-right-radius

از ویژگی 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.

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