border-radius

از این ویژگی 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 با سه مقدار
 

با توجه به تصویر زیر واضح است که هر گوشه دارای انحنایی بصورت یک دایره کامل است:

 
انحنا دادن به عناصر در css
 

این به این دلیل است که در این مثال به هر گوشه فقط یک مقدار تعلق گرفته است, اما می توان با تعیین دو مقدار برای هر گوشه, انحنا را بصورت بیضوی به وجود آورد. (یعنی یک شعاع افقی و یک شعاع عمودی). برای توضیحات بیشتر در این مورد به این مطلب مراجعه کنید.

 

بدون اسلش

با استفاده از اسلش می توان برای هر گوشه دو مقدار تعیین کرد. مقادیر قبل از اسلش مربوط به شعاع های افقی, و مقادیر بعد از آن مربوط به شعاع های عمودی می باشند. برای مثال:

 


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;

 

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

 
گوشه های بیضوی شکل در css
 

مقادیر درصدی برای ساخت دایره و بیضی مفید هستند. به عنوان نمونه اگر عرض و ارتفاع یک عنصر برابر باشند و مقدار 50% به ویژگی border-radius آن عنصر داده شود, عنصر تبدیل به یک دایره می شود و اگر مقادیر عرض و ارتفاع برابر نباشند, نتیجه بیضی شکل خواهد بود.

 
ساخت دایره با border-radius
 

ساخت بیضی با border-radius
 

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

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

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

 


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

 

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

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

 
سر ریز نوشته از عنصر به دلیل وجود border-radius
 

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

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

 

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


 

انحنای گوشه های یک عنصر نباید روی هم قرار بگیرند. زمانی که مجموع انحنای دو گوشه مجاور بیشتر از اندازه عنصر شود, مرورگر باید به نسبت از مقدار انحنای تمام گوشه ها کم کند تا هیچ کدام از آنها روی هر قرار نگیرند.

در دموی زیر که با Sass نوشته شده است می توانید با تغییر مقادیر متغیرها در بالای کد درک بهتری نسبت به عملکرد این ویژگی پیدا کنید:

 

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


 

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