انتقل إلى المحتوى

مولد CSS Border Radius

أنشئ CSS border-radius بصرياً مع معاينة مباشرة. اضبط كل زاوية على حدة أو اربطها. يدعم px و% وrem. انسخ كود CSS. أداة أونلاين مجانية.

معاينة

12px
12px
12px
12px
الوحدة

مخرج CSS

 

ما هو CSS border-radius؟

خاصية CSS border-radius تقوم بتدوير زوايا حافة الإطار الخارجي للعنصر. يمكنك تعيين نصف قطر واحد للزوايا الدائرية، أو نصفي قطر للزوايا البيضاوية.

صيغة border-radius

الاختصار border-radius يقبل من 1 إلى 4 قيم. بقيمة واحدة تكون جميع الزوايا متساوية. بقيمتين تحدد الأولى أعلى-يسار/أسفل-يمين والثانية أعلى-يمين/أسفل-يسار. بأربع قيم تُحدد كل زاوية على حدة: أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار.

الزوايا البيضاوية

باستخدام صيغة / (مثل border-radius: 50% / 30%)، يمكنك تحديد أنصاف أقطار أفقية وعمودية مختلفة للزوايا البيضاوية.

الخصوصية

جميع عمليات توليد border-radius تتم بنسبة 100% في متصفحك. لا يتم إرسال أي بيانات إلى أي خادم.