عرض مصدر CSS/border-radius

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-radius</code>}}</noinclude>
الخاصية <code>border-radius</code> في CSS تسمح لمطوري الويب بتعريف طريقة تدوير أركان الإطار، ويمكن تحديد قيمة واحدة لجعل الأركان دائريةً، أو قيمتين لجعلها على شكل قطع ناقص.<syntaxhighlight lang="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;

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

لن يتم تطبيق الخاصية <code>border-radius</code> على عناصر الجداول إذا كانت قيمة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> مضبوطةً إلى القيمة <code>collapse</code>.

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

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

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل قيمة مختصرة:
*<code>[[CSS/border-top-left-radius|border-top-left-radius]]</code>: <code>0</code>
*<code>[[CSS/border-top-right-radius|border-top-right-radius]]</code>: <code>0</code>
*<code>[[CSS/border-bottom-left-radius|border-top-left-radius]]</code>: <code>0</code>
*<code>[[CSS/border-bottom-right-radius|border-top-right-radius]]</code>: <code>0</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
!النسب المئوية
|نسبة من البُعد الموافق للقيمة من إطار العنصر.
|-
! scope="row" |القيمة المحسوبة
|لكل قيمة مختصرة:
*<code>[[CSS/border-top-left-radius|border-top-left-radius]]</code>: قيمتَي <code>[[CSS/length|<length>]]</code> أو نسبتين مئويتين <code>[[CSS/percentage|<percentage>]]</code>.
*<code>[[CSS/border-top-right-radius|border-top-right-radius]]</code>: قيمتَي <code>[[CSS/length|<length>]]</code> أو نسبتين مئويتين <code>[[CSS/percentage|<percentage>]]</code>.
*<code>[[CSS/border-bottom-left-radius|border-top-left-radius]]</code>: قيمتَي <code>[[CSS/length|<length>]]</code> أو نسبتين مئويتين <code>[[CSS/percentage|<percentage>]]</code>.
*<code>[[CSS/border-bottom-right-radius|border-top-right-radius]]</code>: قيمتَي <code>[[CSS/length|<length>]]</code> أو نسبتين مئويتين <code>[[CSS/percentage|<percentage>]]</code>.

|}

== أمثلة ==
مثال عن استخدام قيمة واحدة لتحديد تدوير جميع أركان عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> التالية، الذي يكون عرض أحدها مساويًا لطوله، والآخر مستطيل الشكل:<syntaxhighlight lang="html">
<div class="square border-radius-50">border-radius: 50%</div>

<div class="rectangle border-radius-50">border-radius: 50%</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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%;
}
</syntaxhighlight>مثال عن تدوير أركان أحد العناصر مع تحديد إطار <code>[[CSS/border|border]]</code> له:<syntaxhighlight lang="html">
<div>thick border with border-radius</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  background-color: salmon;
  color: white;
  padding: 2em;
  margin: 2em;
  border: thick solid #006699;
  border-radius: 20px;
}
</syntaxhighlight>سنستخدم في المثال الآتي الخاصية <code>border-radius</code> مع أربع قيم لإعطاء العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> شكل الحرف D، تذكّر أنَّ أوّل قيمة تمثِّل الركن العلوي الأيسر، وثاني قيمة هي الركن العلوي الأيمن، وثالث قيمة هي الركن السفلي الأيمن، ورابع قيمة هي الركن السفلي الأيسر:<syntaxhighlight lang="html">
<div>the border will curve into a 'D'</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}
</syntaxhighlight>مثال عن استخدام ثماني قيم مع الخاصية border-radius لجعل تدوير الأركان على شكل قطع ناقص:<syntaxhighlight lang="html">
<div>border-radius: 10px 40px 40px 10px / 45px 10px 10px 45px;</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|5
|4
|9
|11.5
|5
|}

== البنية العامة ==
تُحدَّد قيمة الخاصية <code>border-radius</code> كما يلي:
* قيمة وحيدة أو قيمتين أو ثلاث أو أربع قيم من القيم الطولية <code>[[CSS/length|<length>]]</code> أو النسب المئوية <code>[[CSS/percentage|<percentage>]]</code>، وذلك لتحديد نصف قطر وحيد للأركان.
* يمكن أن يُتبَع ما سبق بالمحرف <code>/</code> ويليه قيمة أو قيمتين أو ثلاث أو أربع قيم طولية <code>[[CSS/length|<length>]]</code> أو نسب مئوية <code>[[CSS/percentage|<percentage>]]</code>، وذلك لتحديد نصف قطر ثانوي للتدوير لكي نحصل على أركان مدورة على شكل قطع ناقص.
هذا تفصيل عدد القيم التي تقبلها هذه الخاصية:
* عند تحديد قيمة واحدة، فستُطبّق على جميع الأركان.
* عند تحديد قيمتين، فأوّل قيمة هي نصف القطر المُطبَّق على الركنين العلوي الأيسر والسفلي الأيمن، والقيمة الثانية على الركنين العلوي الأيمن والسفلي الأيسر.
* عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الركن العلوي الأيسر، والقيمة الثانية على الركنين العلوي الأيمن والسفلي الأيسر، والقيمة الثالثة على الركن السفلي الأيمن.
* عند تحديد أربع قيم، فستُطبّق القيم على الركن العلوي الأيسر، والركن العلوي الأيمن، والركن السفلي الأيمن، والركن السفلي الأيسر على التوالي وبالترتيب (أي نبدأ من الركن العلوي الأيسر ثم ندور مع اتجاه عقارب الساعة).
وإذا استخدمنا الخط المائل <code>/</code> فستقبل الخاصية <code>border-radius</code> ثماني قيم، ويكون ما قبل الخط المائل كما بيّنا سابقًا، وأما ما بعده فيُحدِّد نصف القطر الثانوي (الرأسي) للقطع الناقص، ويقبل قيمة واحدة أو قيمتين أو ثلاث أو أربع قيم وهي تماثل ما شرحناه سابقًا من ترتيب.

يمكن توضح ما سبق بأمثلة:<syntaxhighlight lang="css">
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;

</syntaxhighlight>مثال آخر:<syntaxhighlight lang="css">
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;
</syntaxhighlight>

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]? ;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>
</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-radius CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Border|{{SUBPAGENAME}}]]