התוצאות מוצגות לצורכי מידע בלבד ועשויות להכיל שגיאות. מומלץ לאמת מידע חשוב באופן עצמאי. השימוש בכלי הוא באחריותכם בלבד.
מה הכלי עושה
מחולל ה־Border Radius מאפשר לעגל כל פינה של תיבה בנפרד בעזרת ארבעה סליידרים, מ־0 עד 100 פיקסלים, ולראות את הצורה בתצוגה מקדימה חיה. הפלט הוא הצהרת border-radius אחת שאפשר להדביק ישר בגיליון הסגנונות. בפתיחה כל ארבע הפינות מוגדרות ל־20px.
הערכים נכתבים בסדר ש־CSS מצפה לו: שמאל למעלה, ימין למעלה, ימין למטה, שמאל למטה, כלומר עם כיוון השעון, החל מהפינה השמאלית העליונה. ערכים שווים נותנים כרטיס מעוגל באופן אחיד; ערכים שונים נותנים בועות דיבור, לשוניות, צורות של עלה ועיצובים אסימטריים אחרים. הצורה המקוצרת עובדת בכל הדפדפנים העדכניים, בלי קידומות (prefixes).
מתי להשתמש בו
- לעצב כרטיסים, כפתורים ושדות קלט לפי רדיוס הפינות של מערכת העיצוב.
- לעגל רק את הפינות העליונות של לשונית או את הפינות התחתונות של תפריט נפתח.
- ליצור צורה של בועת צ'אט עם פינה חדה אחת.
- לנסות במהירות רדיוסים שונים, במקום לערוך את ה־CSS ולרענן את הדף שוב ושוב.
דוגמה
קלט
שמאל למעלה 24, ימין למעלה 24, ימין למטה 4, שמאל למטה 24פלט
border-radius: 24px 24px 4px 24px;שאלות על הכלי
איך יוצרים עיגול מושלם?
תנו לאלמנט ריבועי border-radius: 50%. אחוזים מחושבים ביחס לגודל האלמנט, ולכן הוא נשאר עגול בכל רוחב. לכפתור בצורת גלולה משתמשים במקום זאת בערך גדול בפיקסלים, כמו 999px.
למה הרקע בולט מעבר לפינות המעוגלות?
אלמנטים צאצאים עם רקע משלהם יכולים לצבוע מעל הפינות. הוסיפו overflow: hidden לאלמנט ההורה המעוגל, או תנו לצאצא את אותו רדיוס.
אפשר ליצור פינה אליפטית?
כן. CSS מקבל שני רדיוסים לכל פינה, מופרדים בלוכסן, למשל border-radius: 50px / 25px. המחולל כותב את הצורה המעגלית הנפוצה; כדי להוסיף את הערך השני, ערכו את הפלט.
האם border-radius משפיע גם על הצל?
כן. box-shadow עוקב אחרי קו המתאר המעוגל, כך שהפינות תואמות. בנו את הצל עם מחולל Box Shadow ושלבו את שתי ההצהרות.
האם הכלי חינמי?
כן, השימוש חינמי. בלי הרשמה ובלי אימייל. התוצאה מופיעה בדף הזה.
איך מקבלים את התוצאה?
משתמשים בכלי בדף הזה. התוצאה מופיעה כאן, בלי צורך במשלוח לאימייל.