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

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-left-radius</code>}}</noinclude>
الخاصية <code>border-top-left-radius</code> في CSS تضبط تدوير الركن العلوي الأيسر من العنصر.<syntaxhighlight lang="css">
/* الركن سيكون دائريًا */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* نسب مئوية */
border-top-left-radius: 20%; /* الركن سيكون دائريًا إن كان العنصر مربعًا */
border-top-left-radius: 20% 20%; /* كما في القاعدة السابقة، أي 20% من العرض و 20% من الطول */
border-top-left-radius: 20% 10%; /* نسبة 20% من العرض و 10% من الطول */

/* الركن سيكون على شكل قطع ناقص */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

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

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

ملاحظة: إن لم تكن قيمة هذه الخاصية مضبوطةً باستخدام الخاصية المختصرة <code>[[CSS/border-radius|border-radius]]</code> التي حُدِّدت بعد استخدام الخاصية <code>border-top-left-radius</code>، فسيُعاد ضبط هذه الخاصية إلى قيمتها الابتدائية بسبب استخدام الخاصية المختصرة.

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

|}

== أمثلة ==
<table class="wikitable">
  <tr>
   <th>مثال حي</th>
   <th>الشيفرة</th>
  </tr>
  <tr>
   <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;">
    <div style="display: none;">.</div>
    </div>
   </td>
   <td>سيُستخدَم قوسٌ من دائرة (نصف قطرها 40 بكسل) كركن للعنصر:<syntaxhighlight lang="css">
div {
  border-top-left-radius: 40px 40px;
}
</syntaxhighlight>
</td>
  </tr>
  <tr>
   <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;">
    <div style="display: none;">.</div>
    </div>
   </td>
   <td>سيُستخدَم قوسٌ من قطع ناقص (نصف قطره الرئيسي [الأفقي] 40 بكسل والثانوي [الرأسي] 20 بكسل) كركن للعنصر:<syntaxhighlight lang="css">
div {
  border-top-left-radius: 40px 20px;
}
</syntaxhighlight>
</td>
  </tr>
  <tr>
   <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;">
    <div style="display: none;">.</div>
    </div>
   </td>
   <td>استخدام نسبة مئوية مع عنصر مربع الشكل، مما يؤدي إلى استخدام قوس من دائرة كركن له:<syntaxhighlight lang="css">
div {
  border-top-left-radius: 40%;
}
</syntaxhighlight>
</td>
  </tr>
  <tr>
   <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;">
    <div style="display: none;">.</div>
    </div>
   </td>
   <td>استخدام نسبة مئوية مع عنصر ليس مربع الشكل، مما يؤدي إلى استخدام قوس من قطع ناقص كركن له:<syntaxhighlight lang="css">
div {
  border-top-left-radius: 40%;
}
</syntaxhighlight>
</td>
  </tr>
  <tr>
   <td style="padding: 1.5em;">
    <div style="border: black 3px double; border-top-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
    <div style="display: none;">.</div>
    </div>
   </td>
   <td>لاحظ كيف سيتم اقتصاص لون الخلفية عند الإطار:<syntaxhighlight lang="css">
div {
  border-top-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
  height: 200px;
  width: 200px;
}
</syntaxhighlight>
</td>
  </tr>
</table>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|5
|4
|9
|11.5
|5
|}

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

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

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-top-left-radius: <length-percentage>{1,2};

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

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