اختصار خاصية borders-radius في لغة CSS | الإطارات المستديرة في لغة CSS

يُمكن في لغة CSS إعطاء كل زاوية من زوايا الإطار الداخلي border تدوير كامل أو تدوير نصفي.

توضيح: يمكن جعل أحد زوايا الإطار مدورة كثيراً، وجعل زاوية ثانية أقل تدوير، وترك باقي الزوايا مربعة بدون عمل تدوير لها.

تحديد حجم التدوير لكل زاوية من زوايا الإطار الداخلي border على حدى:

تحديد حجم تدوير الزاوية العلوية في اليسار عن طريق خاصية border-top-left-radius في لغة CSS.

HTML

p
 {
  border: 2px solid red;
  border-top-left-radius: 12px;
}

تحديد حجم تدوير الزاوية العلوية في اليمين عن طريق خاصية border-top-right-radius في لغة CSS.

HTML

p
 {
  border: 2px solid red;
  border-top-right-radius: 12px;
}

تحديد حجم تدوير الزاوية السفلية في اليمين عن طريق خاصية border-bottom-right-radius في لغة CSS.

HTML

p
 {
  border: 2px solid red;
  border-bottom-right-radius: 12px;
}

تحديد حجم تدوير الزاوية السفلية في اليسار عن طريق خاصية border-bottom-left-radius في لغة CSS.

HTML

p
 {
  border: 2px solid red;
  border-bottom-left-radius: 12px;
}

CSS Borders Radius Shorthand اختصار خاصية borders-radius في لغة CSS