CSS border-radius کی خاصیت

تعریف و استفاده

ویژگی border-radius یک ویژگی کوتاه است که برای تنظیم چهار ویژگی border-*-radius استفاده می‌شود.

توضیح:این ویژگی به شما امکان می‌دهد تا به عنصر خود لبه‌های گرد اضافه کنید!

لطفاً به:

آموزش CSS3:CSS3 کا بوردر

مثال

کامپوننت div را با لبه‌های گرد اضافه کنید:

div
{
border:2px solid;
border-radius:25px;
}

آزمایش کنید

در پایین صفحه مثال‌های بیشتری وجود دارد.

قوانین CSS

border-radius: 1-4 length|% / 1-4 length|%;

نکته:این چهار مقدار برای هر رادیوس به ترتیب تنظیم می‌شوند. اگر bottom-left را حذف کنید، آن با top-right مشابه خواهد بود. اگر bottom-right را حذف کنید، آن با top-left مشابه خواهد بود. اگر top-right را حذف کنید، آن با top-left مشابه خواهد بود.

مقدار ویژگی

مقدار توضیح تست
length شکل کمان‌های گوشه‌ای را تعریف می‌کنند. تست
% شکل کمان‌های گوشه‌ای را با استفاده از درصد تعریف می‌کنند. تست

مثال 1

border-radius:2em;

معادل:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

مثال 2

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;

جزئیات فنی

مقدار پیش‌فرض: 0
erbیت: خیر
نسخه: CSS3
قوانین جاوااسکریپت: object.style.borderRadius="5px"

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

تبلیغات می‌گوید که نسخه‌های اولیه مرورگرها از این ویژگی‌ها پشتیبانی می‌کنند.

چروم IE / ایج فایرفاکس سافری اوپرا
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5