حواف دائرية في CSS

حواف دائرية في CSS

border-radius خصائص تستخدم لإضافة حواف دائرية إلى العنصر:

حاجز عادي

حواف دائرية

حواف دائرية

حواف دائرية

مثال

p {
  border: 2px solid red;
  border-radius: 5px;
}

جرب بنفسك

أمثلة إضافية

جميع خصائص الحاجز العلوي في بيانات واحدة
هذا المثال يوضح استخدام خاصية اختصار، التي تُستخدم لضبط جميع خصائص الحاجز العلوي في بيانات واحدة.
تعيين نمط الحاجز السفلي
هذا المثال يوضح كيفية تعيين نمط الحاجز السفلي.
ضبط عرض الحد الأيسر
هذا المثال يوضح كيفية ضبط عرض الحد الأيسر.
ضبط لون جميع الحدود
هذا المثال يوضح كيفية ضبط لون جميع الحدود الأربعة. يمكن أن يكون لديها لون واحد إلى أربعة ألوان.
ضبط لون الحد الأيمن
هذا المثال يوضح كيفية ضبط لون الحد الأيمن.

جميع خصائص الحدود CSS

الخصائص الوصف
border خصائص مختصرة، تعيين جميع خصائص الحدود في بيانة واحدة.
border-color خصائص مختصرة، تعيين لون جميع الحدود الأربعة.
border-radius خصائص مختصرة، يمكن تعيين جميع خصائص radius border-*-radius لجميع الحدود.
border-style خصائص مختصرة، تعيين نمط جميع الحدود الأربعة.
border-width خصائص مختصرة، تعيين عرض جميع الحدود الأربعة.
border-bottom خصائص مختصرة، تعيين جميع خصائص الحدود السفلية في بيانة واحدة.
border-bottom-color ضبط لون الحد السفلي.
border-bottom-style ضبط نمط الحد السفلي.
border-bottom-width ضبط عرض الحد السفلي.
border-left خصائص مختصرة، تعيين جميع خصائص الحدود الأيسرة في بيانة واحدة.
border-left-color ضبط لون الحد الأيسر.
border-left-style ضبط نمط الحد الأيسر.
border-left-width ضبط عرض الحد الأيسر.
border-right خصائص مختصرة، تعيين جميع خصائص الحدود الأيمنة في بيانة واحدة.
border-right-color ضبط لون الحد الأيمن.
border-right-style ضبط نمط الحد الأيمن.
border-right-width ضبط عرض الحد الأيمن.
border-top خصائص مختصرة، تعيين جميع خصائص الحدود الأعلى في بيانة واحدة.
border-top-color ضبط لون الحد الأعلى.
border-top-style ضبط نمط الحد الأعلى.
border-top-width ضبط عرض الحد الأعلى.