מחולל border radius

איך זה עובד

border-radius פשוט עד שרוצים שלוש פינות מעוגלות ואחת ישרה, ואז כולם צריכים לחפש את סדר ארבעת הערכים.

הסדר, אחת ולתמיד

שמאל למעלה, ימין למעלה, ימין למטה, שמאל למטה, בכיוון השעון החל מפינת שמאל למעלה. אותו סדר, בכיוון השעון החל מפינת שמאל למעלה, חל גם על קיצורי margin, padding ו-border, ושווה לשנן אותו פעם אחת.

פיקסלים או אחוזים

פיקסלים נותנים אותה קשת בכל גודל של אלמנט. אחוזים יחסיים לרוחב ולגובה של האלמנט עצמו, ולכן הקשת משתנה בקנה מידה, ורדיוס של 50% על ריבוע נותן עיגול מושלם, וזה התעלול הסטנדרטי לאווטארים עגולים.

צורת הגלולה

רדיוס גדול מחצי מגובה האלמנט מוגבל בדיוק לחצי, ולכן border-radius: 999px מפיק גלולה באופן אמין בכל גובה. זה יציב יותר מחישוב הערך הנכון, כי זה ממשיך לעבוד כשהתוכן משתנה.

כשהפינות נראות לא נכון באלמנטים מקוננים

תיבה מעוגלת בתוך תיבה מעוגלת אחרת צריכה רדיוס קטן יותר בפנימית, מופחת ברווח הפנימי שביניהן, אחרת העיקולים לא יהיו קונצנטריים. זה פרט קטן שגורם לכרטיסים להיראות מושקעים.