גלולת CSS / מחולל צורות אצטדיון
עצב את רדיוס הגבול של CSS בצורה ויזואלית: ארבעה מחוונים פינתיים עצמאיים בפיקסלים או באחוזים, קיצור דרך קישור לכל הפינות למעגלים מיידיים וכדורים, בתוספת מצב כתם אורגני עם צורות אקראיות.
תוצאה
דף זה פותח את מחולל הגבול-רדיוס כאשר כל ארבע הפינות מקושרות ונדחפות לרדיוס גדול מאוד: 999px. במלבן טיפוסי בגודל כפתור, רדיוס כה גדול נחתך על ידי הדפדפן לחצי מגובה הקופסה בדיוק, וזה מה שמייצר את הגלולה המעוגלת במלואה או את צורת האצטדיון במקום ריבוע עם פינות מעוגלות מעט.
זו הסיבה שכפתורי גלולות אינם זקוקים לערך רדיוס מדויק המכוון לגובה של כל כפתור - כל מספר שגדול בנוחות ממחצית הגובה נותן את התוצאה החתוכה זהה, וזו גם הסיבה ש-999px (או אפילו 9999px) הפך לקיצור הקהילה הבלתי פורמלי של 'סובב את זה לאורך כל הדרך' ב-CSS.
שנה את גודל הקופסה בפריסה משלך ואותו 999px ממשיך לייצר גלולה מלאה בכל גובה, מכיוון שהדפדפן תמיד מתחבר לחצי מהקופסה באופן אוטומטי. העתק את ה-CSS ברגע שהוא נראה נכון, או בטל את הקישור בין הפינות כדי לבנות במקום קפסולה אסימטרית.