border-bottom-left-radius

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

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

 
گرد کردن گوشه پایین سمت چپ عنصر در css
 

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

 


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

 

گرد کردن گوشه پایین سمت چپ عنصر با مقدار مساوی
 

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

 
برش خوردن پس زمینه عنصر به دلیل وجود border-radius
 

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

 


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

 

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

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

 
بیرون زدن محتوا از عنصر در css
 

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

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

 

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

 

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