מחולל Border Radius

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

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

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

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