خاصية CSS border-bottom-left-radius
مثال
أضف حدودًا مستديرة إلى الزاوية السفلية اليسرى لعنصري <div>:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية نصف قطر الزاوية border-bottom-left-radius
اليسرى السفلية.
نصيحة: تسمح لك هذه الخاصية بإضافة حدود مستديرة للعناصر!
القيمة الافتراضية: | 0 |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.borderBottomLeftRadius = "25px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
border-bottom-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
بنية CSS
border-bottom-left-radius: length|% [length|%]|initial|inherit;
ملاحظة: إذا قمت بتعيين قيمتين ، الأولى للحد السفلي ، والثانية للحد الأيسر. إذا تم حذف القيمة الثانية ، يتم نسخها من الأولى. إذا كان أي من الطول صفراً ، فإن الزاوية تكون مربعة وليست مدورة.
قيم الملكية
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
أضف حدودًا مستديرة إلى الزاوية السفلية اليسرى بالنسبة المئوية:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS Rounded Corners
مرجع HTML DOM: خاصية borderBottomLeftRadius