CSS/border-radius

الخاصية border-radius في CSS تسمح لمطوري الويب بتعريف طريقة تدوير أركان الإطار، ويمكن تحديد قيمة واحدة لجعل الأركان دائريةً، أو قيمتين لجعلها على شكل قطع ناقص.

/* ضبط التدوير لجميع الأركان معًا */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* يمكن ضبط قيمتين معًا للتدوير، واحدة لتحديد نصف القطر الرئيسي للقطع الناقص، والأخرى لضبط نصف القطر الثانوي له. */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* القيم العامة */
border-radius: inherit;

يمكن أن يكون الركن دائري الشكل، أو يمكن أن يكون على شكل قطع ناقص (ellipse) وذلك اعتمادًا على القيمة المُسنَدة إلى هذه الخاصية، وإذا كانت القيمة تساوي 0 فلن يكون الركن مدورًا.

لن يتم تطبيق الخاصية border-radius على عناصر الجداول إذا كانت قيمة الخاصية border-collapse مضبوطةً إلى القيمة collapse.

سيتم اقتصاص الخلفية background (سواءً كانت صورةً أو لونًا) عند الإطار (حتى لو كان مدورًا)، لكن مكان الاقتصاص المُحدَّد سيُعرَّف وفق قيمة الخاصية background-clip. يجدر بالذكر أنَّ الاقتصاص سوف يتم حتى لو لم يكن هنالك إطارٌ ظاهرٌ للعنصر.

وكما مع جميع الخاصيات مختصرة، لا يمكن توريث القيم المفردة، كما في border-radius:0 0 inherit inherit، وعندئذٍ يجب استخدام الخاصيات الطويلة كلًا على حدة.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: border-top-left-radius: 0 border-top-right-radius: 0 border-top-left-radius: 0 border-top-right-radius: 0
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
النسب المئوية	نسبة من البُعد الموافق للقيمة من إطار العنصر.
القيمة المحسوبة	لكل قيمة مختصرة: border-top-left-radius: قيمتَي <length> أو نسبتين مئويتين <percentage>. border-top-right-radius: قيمتَي <length> أو نسبتين مئويتين <percentage>. border-top-left-radius: قيمتَي <length> أو نسبتين مئويتين <percentage>. border-top-right-radius: قيمتَي <length> أو نسبتين مئويتين <percentage>.

أمثلة

مثال عن استخدام قيمة واحدة لتحديد تدوير جميع أركان عناصر <div> التالية، الذي يكون عرض أحدها مساويًا لطوله، والآخر مستطيل الشكل:

<div class="square border-radius-50">border-radius: 50%</div>

<div class="rectangle border-radius-50">border-radius: 50%</div>

شيفرة CSS:

div {
  background-color: salmon;
  padding: 1em;
  margin: 1em;
  text-align: center;
  color: white;
  line-height: 12em;
  height: 12em;
}
.square {
  width: 12em;
}

.rectangle {
  width: 8em;
}

.border-radius-50 {
  border-radius: 50%;
}

مثال عن تدوير أركان أحد العناصر مع تحديد إطار border له:

<div>thick border with border-radius</div>

شيفرة CSS:

div {
  background-color: salmon;
  color: white;
  padding: 2em;
  margin: 2em;
  border: thick solid #006699;
  border-radius: 20px;
}

سنستخدم في المثال الآتي الخاصية border-radius مع أربع قيم لإعطاء العنصر <div> شكل الحرف D، تذكّر أنَّ أوّل قيمة تمثِّل الركن العلوي الأيسر، وثاني قيمة هي الركن العلوي الأيمن، وثالث قيمة هي الركن السفلي الأيمن، ورابع قيمة هي الركن السفلي الأيسر:

<div>the border will curve into a 'D'</div>

شيفرة CSS:

div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

مثال عن استخدام ثماني قيم مع الخاصية border-radius لجعل تدوير الأركان على شكل قطع ناقص:

<div>border-radius: 10px 40px 40px 10px / 45px 10px 10px 45px;</div>

شيفرة CSS:

div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	5	4	9	11.5	5

البنية العامة

تُحدَّد الخاصية border-radius كما يلي:

• قيمة وحيدة أو قيمتين أو ثلاث أو أربع قيم من القيم الطولية <length> أو النسب المئوية <percentage>، وذلك لتحديد نصف قطر وحيد للأركان.
• يمكن أن يُتبَع ما سبق بالمحرف / ويليه قيمة أو قيمتين أو ثلاث أو أربع قيم طولية <length> أو نسب مئوية <percentage>، وذلك لتحديد نصف قطر ثانوي للتدوير لكي نحصل على أركان مدورة على شكل قطع ناقص.

هذا تفصيل عدد القيم التي تقبلها هذه الخاصية:

• عند تحديد قيمة واحدة، فستُطبّق على جميع الأركان.
• عند تحديد قيمتين، فأوّل قيمة هي نصف القطر المُطبَّق على الركنين العلوي الأيسر والسفلي الأيمن، والقيمة الثانية على الركنين العلوي الأيمن والسفلي الأيسر.
• عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الركن العلوي الأيسر، والقيمة الثانية على الركنين العلوي الأيمن والسفلي الأيسر، والقيمة الثالثة على الركن السفلي الأيمن.
• عند تحديد أربع قيم، فستُطبّق القيم على الركن العلوي الأيسر، والركن العلوي الأيمن، والركن السفلي الأيمن، والركن السفلي الأيسر على التوالي وبالترتيب (أي نبدأ من الركن العلوي الأيسر ثم ندور مع اتجاه عقارب الساعة).

وإذا استخدمنا الخط المائل / فستقبل الخاصية border-radius ثماني قيم، ويكون ما قبل الخط المائل كما بيّنا سابقًا، وأما ما بعده فيُحدِّد نصف القطر الثانوي (الرأسي) للقطع الناقص، ويقبل قيمة واحدة أو قيمتين أو ثلاث أو أربع قيم وهي تماثل ما شرحناه سابقًا من ترتيب.

يمكن توضح ما سبق بأمثلة:

border-radius: 1em/5em;

/* القاعدة السابقة تكافئ ما يلي */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

مثال آخر:

border-radius: 4px 3px 6px / 2px 4px;

/* القاعدة السابقة تكافئ ما يلي */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

<length> أو <percentage>

تحديد طول نصف قطر الدائرة أو أنصاف القطرين الرئيسي والثانوي في القطع الناقص، ويمكن استخدام الأطوال المطلقة بما يسمح به نوع البيانات <length>، والنسب المئوية للقطر الرئيسي (الأفقي) تكون نسبةً إلى عرض صندوق العنصر، والنسب المئوية للقطر الثانوي (الرأسي) تكون نسبةً إلى ارتفاع صندوق العنصر. ولا يجوز استخدام القيم السالبة.

البنية الرسمية

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]? ;

حيث:

<length-percentage> = <length> | <percentage>

انظر أيضًا

• الخاصيات الأخرى التي تضبطها الأركان المدورة border-radius وهي: border-bottom-right-radius، و border-bottom-left-radius، و border-top-left-radius، و border-top-right-radius.
• صفحةالخاصية border والخاصيات الأخرى التي تضبطها وهي: border-style، و border-color.
• صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي border-top، والإطاري السفلي border-bottom، والإطار اليميني border-right، والإطار اليساري border-left.

مصادر ومواصفات

• مواصفة CSS Backgrounds and Borders Module Level 3.