מחולל פינות מעוגלות — כלי CSS border-radius חזותי

גררו את המחוונים כדי לעצב כל פינה בתיבת התצוגה המקדימה, והעתיקו את קוד ה-CSS של border-radius שנוצר. נעלו את כל ארבע הפינות יחד לקבלת מלבן מעוגל פשוט, או שחררו אותן כדי ליצור צורות כדוריות (pill), צורות עלה וצורות א-סימטריות אורגניות.

מהו הכלי הזה?

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

הכלי הזה מסיר את הניחוש: הזיזו מחוון, צפו בפינה מתעגלת בתצוגה המקדימה החיה, וקראו את קוד ה-CSS המדויק מתיבת הקוד שנוצרה. מתג נעילה אחד עובר בין רדיוס אחיד (כל ארבע הפינות זהות, המקרה הנפוץ ביותר) לבין ארבעה מחוונים עצמאיים לצורות אורגניות וא-סימטריות.

למה להשתמש בו?

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

איך להשתמש

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

דוגמה

קלט

שמאל-עליון: 40px, ימין-עליון: 8px, ימין-תחתון: 40px, שמאל-תחתון: 8px

פלט

border-radius: 40px 8px 40px 8px;

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

px או % — באיזו יחידה כדאי להשתמש?

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

אחוזים מתנהגים אחרת — הם יחסיים לרוחב ולגובה של האלמנט עצמו, כך שרדיוס של 50% על אלמנט מרובע יוצר עיגול מושלם, ועל אלמנט לא מרובע יוצר אליפסה. אם אתם רוצים את האפקט הזה (תמונות פרופיל, צורות בלוב שמתאימות את עצמן לגודל המכולה), קחו את קוד ה-CSS שנוצר והחליפו ידנית את ערכי ה-px בערך אחוזים — למשל border-radius: 50% הופך כל תיבה מרובעת לעיגול.

דפוסי border-radius נפוצים

כרטיס מעוגל: כל הפינות שוות, בערך 8–16px עבור רכיבי UI.
כפתור כדורי: הגדירו את הרדיוס לחצי מגובה האלמנט (או פשוט השתמשו ב-9999px, שמתכווץ אוטומטית לכדור מלא ללא תלות בגובה).
תמונת פרופיל עגולה: border-radius: 50% על אלמנט מרובע (רוחב וגובה שווים).
בועת דיבור: שלוש פינות מעוגלות, פינה אחת חדה — הגדירו שלושה מחוונים גבוה ואחד ל-0.
צורת עלה / עלה כותרת: פינות נגדיות תואמות, פינות סמוכות שונות — למשל שמאל-עליון וימין-תחתון גדולות שתיהן, ימין-עליון ושמאל-תחתון קטנות שתיהן.

שילוב עם צל

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

→ מחולל צל תיבה

שאלות נפוצות

מה ההבדל בין border-radius לבין סדר הפינות?

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

האם אפשר להשתמש ביחידות שונות לכל פינה?

כן, ב-CSS אמיתי אפשר לשלב px, %, em ו-rem בין הפינות, אם כי זה נדיר בפועל. הכלי הזה מייצר ערכי px אחידים לשם פשטות — שנו כל ערך בודד ל-% או ליחידה אחרת ישירות בגיליון הסגנונות שלכם אם אתם זקוקים ליחידות מעורבות.

מדוע border-radius: 50% יוצר לפעמים אליפסה במקום עיגול?

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

האם border-radius עובד גם על תמונות רקע וגבולות?

כן — border-radius חותך את הרקע, הגבול (ובדפדפנים מודרניים) גם את ה-box-shadow של האלמנט לצורה המעוגלת. הוא לא חותך תוכן צאצא שגולש אלא אם גם מגדירים overflow: hidden על האלמנט האב.

האם יש הגבלה לגודל הרדיוס?

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

איך יוצרים צורה כדורית או עיגול מושלם?

לצורת כדור (קפסולה), הגדירו את הרדיוס לפחות לחצי מגובה האלמנט — הטריק הנפוץ הוא border-radius: 9999px, שעובד בכל גובה כי הדפדפן מגביל את העקומה אוטומטית. עיגול מושלם דורש שני דברים: רוחב וגובה שווים, בתוספת border-radius: 50%.

מחולל border-radius