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
الوراثة: لا
الإصدار: CSS3
جملة JavaScript: JavaScript.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