הנקודות החשובות
- 01שלושה מצבים — אחיד, לפי פינה ואליפטי — מכסים הכל מכפתורים מעוגלים פשוטים לצורות blob אורגניות.
- 02תומך ביחידות px, % ו-rem, כל אחת עם התנהגות קנה מידה שונה.
- 03מצב אליפטי חושף רדיוסים אופקיים ואנכיים לכל פינה לתחביר border-radius מלא של CSS.
- 04תצוגה חיה משתמשת בנכס CSS האמיתי, כך שמה שאתה רואה הוא בדיוק מה שהדפדפן שלך יעריך.
מפינות מעוגלות פשוטות לצורות Blob אורגניות
קל מספיק להקליד ערך border-radius של ארבע פינות מהזיכרון — border-radius: 8px. אבל כשאתה צריך רדיוסים שונים לכל פינה, או שאתה רוצה את תחביר border-radius האליפטי לצורות אורגניות, הקיצור הופך להיות הצפני במהירות. הטופס המלא הוא top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — שמונה ערכים בסדר ספציפי.
מחולל border-radius של Handytool מאפשר לך לגרור סליידרים לכל פינה בכל מצב ולראות את הצורה מתעדכנת בזמן אמת. החלף בין px, % ו-rem ללא חישוב מחדש, והעתק את תחביר border-radius הנכון או הצהרת CSS בצורה ארוכה כשתסיים.
כיצד לעצב Border Radius
- 01
בחר מצב
מצב אחיד מחיל רדיוס אחד על כל ארבע הפינות. מצב לפי פינה שולט בכל פינה באופן עצמאי. מצב אליפטי מוסיף רדיוס אופקי ואנכי נפרד לכל פינה.
- 02
בחר יחידה
בחר px לגדלים מוחלטים, % לערכים שמשתנים בממדי הרכיב, או rem לגדלים הקשורים לגודל הגופן של השורש.
- 03
גרור את הסליידרים
התאם את ערכי הרדיוס וראה את אלמנט התצוגה מתעדכן בזמן אמת. לעומת זאת מצב לפי פינה, גרור את הסליידר של כל פינה באופן עצמאי.
- 04
תצוגה מקדימה של הצורה
התיבה בתצוגה מקדימה מחילה את נכס border-radius של CSS בפועל, כך שהצורה שאתה רואה היא הצורה שהדפדפן שלך יעריך.
- 05
העתק את ה-CSS
לחץ על העתק כדי להשיג את הצהרת border-radius והדבק אותה לגיליון הסגנונות שלך.
צורות נפוצות ומתי להשתמש בכל מצב
- 01כפתור Pill: מצב % אחיד, הגדר ל-50% — תמיד חPills מלא ללא קשר לרוחב הכפתור
- 02כרטיס עם עיגול עדין: מצב px אחיד, 8–16px — דפוס ה-UI השכיח ביותר
- 03תג או תווית אסימטרית: מצב לפי פינה, חד באחד צד, מעוגל בצד השני
- 04עיגול Avatar: מצב % אחיד, 50% — משתנה בקנה מידה עם מיכל התמונה
- 05צורת Blob אורגנית: מצב אליפטי עם ערכי X/Y שונים לכל פינה
תצוגה מקדימה מיידית, לא הועלה דבר
מחולל border-radius הוא לחלוטין מצד הלקוח. סליידרים, מיתוג מצב ושינויים של יחידות כולם מעדכנים את התצוגה המקדימה מיד ללא סיבוב שרת. אין חשבון ואין מגבלת קצב.
הכלי עובד בכל דפדפנים מודרניים. נכס border-radius — כולל תחביר אליפטי X/Y — נתמך בכל גרסה ירוקה של Safari, Firefox, Edge ו-Chrome, כך שהפלט בטוח לשימוש ללא קידומות ספקן או חילופיות.
Border-Radius Generator FAQ
מה ההבדל בין px ל-% עבור border-radius?
רדיוסי פיקסל הם מוחלטים — 16px הוא תמיד 16px. רדיוסים באחוזים קשורים לממדי הרכיב, כך ש-50% יוצר עיגול מושלם על קופסה מרובעת ואליפסה על מלבן.
מתי אני צריך להשתמש במצב אליפטי?
השתמש במצב אליפטי כשאתה רוצה פינה שבולטת יותר בציר אחד — לחלק אופקי, צורת עלה או blob אורגני. CSS מבטא זאת כ-X-radii / Y-radii בקיצור border-radius.
למה רדיוס האחוז שלי נראה לא נכון על קופסה לא מרובעת?
אחוזים אופקיים קשורים לרוחב הרכיב; אחוזים אנכיים לגובהו. על אלמנט רחב וקצר, הפינות מתוחות לאליפסות ולא קשתות עגולות.
האם הפלט עובד בכל דפדפן?
כן — border-radius כולל תחביר אליפטי נתמך בכל דפדפן מודרני: כל הגרסאות הירוקות של Safari, Firefox, Edge ו-Chrome. אין צורך בקידומות ספקן.
כיצד ליצור עיגול מושלם עם border-radius?
הגדר את כל הפינות ל-50% במצב אחוז על אלמנט מרובע. הרכיב גם צריך רוחב וגובה שווים — השתמש ב-aspect-ratio: 1 / 1 אם הגודל דינמי.