מחולל CSS Border Radius
עצב border-radius של CSS באופן חזותי עם תצוגה מקדימה חיה והעתק קוד מוכן לייצור.
border-radius: —;
פרטי לחלוטין — הכול פועל בדפדפן שלך. שום דבר לא מועלה.
אודות מחולל CSS Border Radius
מחולל ה-Border Radius ל-CSS יוצר הכול, מכרטיסים מעוגלים בעדינות ועד צורות בלוב אורגניות. גררו את ידיות הפינה ישירות על התצוגה המקדימה, או קבעו כל פינה מספרית — כולל תחביר שמונה הערכים המלא, שבו לכל פינה יש רדיוס אופקי ואנכי נפרד. הציר השני הזה הוא מה שפותח ביצים, עלים, טיפות דמע ובלובים.
מתג "קישור פינות" שומר את ארבע הפינות מסונכרנות לעיגול אחיד קלאסי, בעוד ניתוקן משחרר כל פינה לצורות א-סימטריות. שתים עשרה תבניות מוכנות — מעוגל, גלולה, עיגול, squircle, שני בלובים, עלה, ביצה, קשת, טיפת דמע, עלה כותרת וגל — מדגימות את יכולות התכונה, וכפתור אקראיות מייצר צורות אורגניות חדשות ללא הגבלה.
אפשר לשנות את היחידה, לצבוע מחדש את האלמנט והקנבס כך שיתאימו לעיצוב שלכם, ולהעתיק את ערך border-radius הבודד או כלל CSS שלם. הכלי פועל 100% בצד הלקוח — שום דבר לא מועלה.
כיצד להשתמש ב-מחולל CSS Border Radius
- גררו את ידיות הפינה על התצוגה המקדימה, או כבו את "קישור כל הפינות" כדי לערוך כל פינה בנפרד.
- קבעו את הרדיוס האופקי והאנכי לכל פינה עבור צורות אורגניות בסגנון בלוב.
- בחרו את היחידה שלכם וכווננו את צבעי האלמנט והרקע כדי לראות תצוגה מקדימה בהקשר.
- נסו את התבניות — גלולה, squircle, בלוב, עלה, טיפת דמע ועוד — או לחצו על אקראיות.
- העתיקו את ערך border-radius או את ה-CSS המלא.