مولد Border Radius CSS

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

اضبط border-radius على 50% على عنصر مربع (عرض وارتفاع متساويين). هذا ينشئ دائرة مثالية. للشكل البيضاوي، استخدم border-radius: 50% على عنصر مستطيل.

يقبل border-radius قيم px و% وem وrem وvw وvh ووحدات طول CSS أخرى. النسب المئوية نسبية لأبعاد العنصر.

تتبع الصيغة المختصرة النمط: أعلى-يسار أعلى-يمين أسفل-يمين أسفل-يسار. قيمة واحدة تنطبق على جميع الزوايا. قيمتان تحددان أعلى-يسار/أسفل-يمين وأعلى-يمين/أسفل-يسار.

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

يعمل border-radius على معظم عناصر HTML بما في ذلك div وbutton وimg وinput. لكنه قد لا يقص المحتوى الفائض بدون overflow: hidden.

نعم، بدمج قيم نصف قطر مختلفة لكل زاوية، يمكنك إنشاء أشكال الكبسولة والأشكال البيضاوية وأوراق الأشكال والأشكال العضوية المخصصة.

نعم، border-radius مدعوم في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge ومتصفحات الهاتف المحمول.

اضبط border-radius على قيمة تساوي أو تزيد عن نصف ارتفاع العنصر. لزر بارتفاع 40px، استخدم border-radius: 20px أو أعلى.

نعم، border-radius يقص الخلفية وصورة الخلفية والحد للعنصر. تتبع الخلفية الزوايا المستديرة تلقائيًا.

نعم، يمكن تحريك border-radius مع انتقالات ورسوم CSS المتحركة. يمكنك الانتقال بسلاسة بين قيم نصف القطر المختلفة.

نعم، يعمل border-radius جيدًا مع تحويلات CSS مثل rotate وscale وtranslate.

طبق border-radius: 50% على عنصر مربع بعرض وارتفاع متساويين، ثم أضف خاصية border.

الخصائص الفردية مثل border-top-left-radius تمنحك تحكمًا دقيقًا في كل زاوية. الصيغة المختصرة تتيح لك تعيين زوايا متعددة في إعلان واحد.