خاصية CSS border-radius
مثال
أضف الزوايا الدائرية إلى عنصري <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
border-radius
تحدد الخاصية نصف قطر زوايا العنصر .
نصيحة: تتيح لك هذه الخاصية إضافة زوايا مستديرة إلى العناصر!
يمكن أن يكون لهذه الخاصية من واحد إلى أربع قيم. فيما يلي القواعد:
أربع قيم - نصف قطر الحدود: 15 بكسل 50 بكسل 30 بكسل 5 بكسل ؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى ، والقيمة الثانية تنطبق على الزاوية العلوية اليمنى ، والقيمة الثالثة تنطبق على الزاوية اليمنى السفلية ، والقيمة الرابعة تنطبق على الزاوية اليسرى السفلية):
ثلاث قيم - نصف قطر الحد: 15 بكسل 50 بكسل 30 بكسل ؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى ، والقيمة الثانية تنطبق على الزوايا العلوية اليمنى والسفلية اليسرى ، والقيمة الثالثة تنطبق على الزاوية اليمنى السفلية):
قيمتان - نصف قطر الحد: 15 بكسل 50 بكسل ؛ (تنطبق القيمة الأولى على الزوايا العلوية اليسرى والسفلية اليمنى ، وتنطبق القيمة الثانية على الزوايا العلوية اليمنى والسفلية اليسرى):
قيمة واحدة - نصف قطر الحد: 15 بكسل ؛ (تنطبق القيمة على جميع الزوايا الأربع ، والتي يتم تقريبها بشكل متساوٍ:
القيمة الافتراضية: | 0 |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.borderRadius = "25px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
بنية CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
ملاحظة: القيم الأربع لكل نصف قطر معطاة بالترتيب من أعلى اليسار ، أعلى اليمين ، أسفل اليمين ، أسفل اليسار. إذا تم حذف أسفل اليسار ، فسيكون هو نفسه أعلى اليمين. إذا تم حذف أسفل اليمين ، فسيكون هو نفسه أعلى اليسار. إذا تم حذف أعلى اليمين ، فسيكون هو نفسه أعلى اليسار.
قيم الملكية
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
تعيين الزوايا الدائرية لعنصر بلون الخلفية:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
مثال
تعيين الزوايا الدائرية لعنصر بحد:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
مثال
تعيين الزوايا الدائرية لعنصر بصورة خلفية:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
مثال
لاحظ أيضًا هذا:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
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 التعليمي: CSS Rounded Corners
مرجع DOM HTML: خاصية borderRadius