איך מייצרים border-radius ב-CSS לכל פינה בנפרד?

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

איך יוצרים צורת כתם אורגני עם CSS?

הפעילו את אליפטי (תחביר X / Y) כדי לקבוע רדיוסים אופקיים ואנכיים בנפרד לכל פינה, או לחצו על כתם אקראי. הפלט משתמש בתחביר הלוכסן, לדוגמה 32px 20px 20px 32px / 20px 32px 20px 32px.

האם כדאי להשתמש ב-px או באחוזים ל-border radius?

השתמשו ב-px לגודל פינה קבוע ללא תלות בגודל התיבה. השתמשו ב-% לרדיוסים יחסיים לאלמנט, כמו 50% לעיגול על ריבוע. הבקרה יחידה מעבירה ביניהם; המחוונים מגיעים עד 200 px או 100 אחוז.

אפשר להעתיק את התוצאה כמחלקת Tailwind?

כן. החליפו את פורמט הפלט ל-Tailwind כדי להעתיק מחלקת ערך שרירותי כמו rounded-[...] במקום הצהרת ה-CSS.

אפשר לבדוק את הרדיוס על תיבה בגודל שונה?

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

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

◖

מחולל Border Radius ב-CSS בחינם

עצב פינות מעוגלות בצורה ויזואלית עם שליטה עצמאית על כל פינה. תומך בתחביר X/Y אליפטי לצורות אורגניות.

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

פועל לא-מקוון לאחר טעינה

border-radius: 20px 20px 20px 20px;

אחיד (כל הפינות שוות)אליפטי (תחביר X / Y)

יחידה

צבע:

רוחב (192px)

גובה (192px)

כל הפינות (20px)

שימושים נפוצים

צורות Blob אורגניותהשתמש בתחביר אליפטי X/Y כדי ליצור צורות blob ייחודיות עבור חלקי הירו ואיורים.
פינות כרטיס וקונטיינרפינות מעוגלות סטנדרטיות לכרטיסים, קונטיינרים וצלחות בעיצוב UI מודרני.
צורות Avatar וצילום פרופילצור את סגנון הפינה הנכון לתמונות פרופיל: מעגלי, squircle או ריבוע מעוגל.
גלולות, תגיות ותגיםבנה כפתורי גלולה מעוגלים בעתידות, תגיות ותגים עם ההגדרה המוגדרת של 9999.
עיצובי פינה אסימטרייםערבב רדיוסים על פני פינות ליצירת צורות כרטיס וכפתור מובחנות וניתנות להכרה במותג.

כיצד זה עובד

מחולל רדיוס-הגבול פועל כולו בדפדפן — אין שרת, אין ספרייה, ואין העלאה. הוא בונה את מחרוזת ערך ה-CSS border-radius ישירות ב-JavaScript באמצעות מצב React ו-useMemo, ואז מחיל אותה כסגנון inline על אלמנט div חי כך שמנוע ה-CSS של הדפדפן עצמו מציג את הצורה בזמן אמת.

1
מחוונים כותבים מצב
כל קלט טווח כותב לאחד משמונה משתני מצב מספריים — ארבעה רדיוסי פינה אופקיים וארבעה אנכיים למצב אליפטי. מצב מאוחד מקפל את כל השמונה למחוון בודד באמצעות פונקציית עזר setAll שמסנכרנת כל ערך בבת אחת.
2
useMemo מרכיב את ערך ה-CSS
hook של useMemo מחשב מחדש את מחרוזת רדיוס-הגבול בכל פעם שערך פינה, יחידה (px או %), או מתג אליפטי משתנה. במצב סטנדרטי הוא מפיק את קיצור ארבעת-הערכים; עם אליפטי פעיל, הוא מוסיף את מפריד הלוכסן לתחביר שמונת-הערכים המלא — למשל 32px 20px 20px 32px / 20px 32px 20px 32px.
3
מנוע ה-CSS של הדפדפן מציג את התצוגה המקדימה
המחרוזת המחושבת מוגדרת כסגנון inline borderRadius על אלמנט div רגיל. מנוע הפריסה של הדפדפן עושה את כל ההצגה — אין קנבס, אין SVG, ואין קוד ציור צד שלישי.
4
Clipboard API מעתיק את הפלט
לחיצה על העתק קוראת ל-navigator.clipboard.writeText עם ההצהרה CSS (border-radius: ...;) או מחלקת הערך השרירותי המקבילה של Tailwind (rounded-[...]), בהתאם למתג הפורמט הנבחר.