خاصية border-radius في لغة CSS تُستخدم لإنشاء حواف دائرية أو مُستديرة للعناصر. بدلًا من أن تكون حواف العنصر حادة وزاوية، تُتيح لك هذه الخاصية جعلها مُنحنية بشكل ناعم.

كيف تعمل؟

تأخذ الخاصية border-radius قيمة أو أكثر تُحدد نصف قطر الانحناء لكل زاوية من زوايا العنصر الأربعة. يُمكن تحديد قيمة واحدة لتطبيق نفس الانحناء على جميع الزوايا، أو يُمكن تحديد قيم مُختلفة لكل زاوية على حدة.

طريقة الكتابة (Syntax):

CSS
border-radius: [قيمة 1] [قيمة 2] [قيمة 3] [قيمة 4];
  • قيمة 1: تُحدد نصف قطر انحناء الزاوية العلوية اليسرى (top-left).
  • قيمة 2: تُحدد نصف قطر انحناء الزاوية العلوية اليمنى (top-right).
  • قيمة 3: تُحدد نصف قطر انحناء الزاوية السفلية اليمنى (bottom-right).
  • قيمة 4: تُحدد نصف قطر انحناء الزاوية السفلية اليسرى (bottom-left).

اختصارات:

  • إذا تم تحديد قيمة واحدة فقط، فسيتم تطبيقها على جميع الزوايا.
  • إذا تم تحديد قيمتين، فسيتم تطبيق القيمة الأولى على الزاويتين العلويتين (top-left و top-right) والسفليتين (bottom-right و bottom-left)، بينما سيتم تطبيق القيمة الثانية على الزاويتين الجانبيتين (top-right و bottom-left).
  • إذا تم تحديد ثلاث قيم، فسيتم تطبيق القيمة الأولى على الزاوية العلوية اليسرى، والقيمة الثانية على الزاويتين العلويتين والسفليتين، والقيمة الثالثة على الزاوية السفلية اليمنى.

أمثلة:

  • حواف دائرية متساوية:
CSS
.element {
  border-radius: 10px; /* جميع الزوايا 10 بكسل */
}
  • حواف بيضاوية:
CSS
.element {
  border-radius: 20px 10px; /* الزوايا العلوية والسفلية 20 بكسل، والجانبيتين 10 بكسل */
}
CSS
.element {
  border-radius: 10px 20px 30px 40px; /* كل زاوية بقيمة مختلفة */
}
  • دائرة كاملة: لإنشاء دائرة كاملة، يجب أن تكون قيمة border-radius نصف عرض العنصر (إذا كان مربعًا) أو نصف القطر الأصغر (إذا كان مستطيلًا).
  • جرب الان
CSS
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* أو 50px */
}

وحدات القياس:

يُمكن استخدام وحدات قياس مُختلفة مع border-radius، مثل:

  • px (بكسل): قيمة ثابتة.
  • em: نسبة إلى حجم الخط الحالي.
  • %: نسبة إلى عرض العنصر.

الاستخدامات الشائعة:

  • إنشاء أزرار دائرية أو مُستديرة.
  • إضافة لمسة جمالية للصور.
  • تصميم فقاعات المحادثة.
  • إنشاء أشكال مُختلفة عن طريق الجمع بين border-radius وخصائص CSS الأخرى.

باستخدام خاصية border-radius، يُمكنك إضافة لمسة عصرية وجذابة لتصميم صفحات الويب الخاصة بك، وجعل العناصر تبدو أكثر نعومة وانسيابية.