مولّد border-radius لتدوير الحواف
دوّر الزوايا الأربع معًا أو كل زاوية وحدها، وانسخ سطر border-radius.
CSS
اصنع حوافًا دائرية بـ CSS
تُليّن الحواف الدائرية البطاقات والأزرار والصور الرمزية والصور. تفتح هذه الصفحة مولّد CSS على تبويب تدوير الحواف، حيث تدوّر الزوايا كلها معًا أو تشكّل كل زاوية على حدة.
أمثلة
| CSS | الشكل |
|---|---|
border-radius: 8px; | بطاقة أو زر بتدوير خفيف |
border-radius: 50%; | دائرة على مربع، مثل الصورة الرمزية |
border-radius: 999px; | زر أو وسم على شكل كبسولة |
border-radius: 24px 24px 0px 0px; | الزاويتان العلويتان فقط مدوّرتان، كما في اللوحة السفلية المنبثقة |
بكسل أم نسبة مئوية
قيم البكسل تحافظ على الانحناء نفسه أيًّا كان حجم العنصر، وهذا يناسب الأزرار والبطاقات. أما النسب المئوية فتكبر مع العنصر، وتُقاس كل زاوية بالنسبة إلى عرضه وارتفاعه كلٌّ على حدة، لذلك يصبح الانحناء بيضاويًا على المستطيل.
أدوات ذات صلة
لإضافة ظل إلى العنصر المدوَّر، راجع مولّد box-shadow. ولتعبئته بتدرّج لوني، راجع مولّد تدرّج CSS.