ویژگی border-radius CSS

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

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

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

لطفاً به:

آموزش CSS3:کناره‌های CSS3

مثال

برای افزودن گوشه‌های گرد به عنصر div، استفاده کنید:

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

آزمایش کنید

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

نوع نوشتاری CSS

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

نکته:با این ترتیب هر چهار مقدار برای هر یک از radii تنظیم می‌شوند. اگر 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
انجام میراث: no
نسخه: CSS3
نوع نوشتاری JavaScript: object.style.borderRadius="5px"

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

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

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5