“WHY PI SUCKS —A SHOCKING EXPOSAL OF THE WORLD MOST FAMOUS IRRATIONAL NUMBER”

In CSS corners

In corners in css, if you want to round them you use the border-radius: property. So lets make a pill shape that works for all sizes of objects: we want it to have the height of half of the box:

.pill {
        
                    border-radius:
                50% /* 50% of height */
        
        };

Okay there, lets see if that works:

WHAT!?!? Thats a oval, lets Web Search it to see what other people do.

Okay, it seems we can just use a really high amount of em:


            border-radius: 999em  /* maxes at height */

Now lets test:

Okay that works! Now lets make a vertical pill shape, first lets see if it already works:

Woah that still worked! Now lets round only 25% of the height. We need need to search this, as if we entered in 25% it would behave like from the start(an oval). I did the search, it seems we can do 25% / (25*aspectRatio)% we cant just write out aspect ratio like that but we could hard code it at 2x :


        border-radius: 25% / 12.5%

Lets test it :3

Okay that worked, but lets now change it depending on aspect ratio. lets web search how to do that: we need javascript :( . well then, We can get the height property of the element, and then set border radius to heightPX. This will work as we have it in px. To make this more dynamic, we can add a number to it for the roundedness: we can add this number using element.dataset.myValueName and data-myValueName="25" So lets do this:


		
            elementsToRound =
                document.querySelectorAll(".RoundCorners") // get the elements
        
         
        
            function setElementBorderRadius() {
        
        
             
        
        
               elementsToRound.forEach((element)
                => {
        
        
                  const height = element.offsetHeight
        
        
                  const roundingPercent = parseFloat(element.dataset.roundingPercent) || 0 // data-rounding-percent
        
        
                  element.style.borderRadius = height * roundingPercent + "px" 
        
        
               });
        
        };
         
        
            window.addEventListener("resize",
                setElementBorderRadius)
        
        
            setElementBorderRadius()

Lets test it, theres a bug. Okay now it works:

There! We rounded a corner, we could add resize observer, or add getElementsByClassName(to allow for the list of elements to change dynamically).
in this write up we went over rounding a corner dynamically, but its more than that. Rounding a corner dynamically based on height/width is something you will probally run into occasionally. And not being able to do it simply can be very annoying at times. maybe in the future there will something added to CSS that makes doing this easy and trivial, but in its current state this is a hard and tricky edge case that we as need to be weary of.
something like This but without dataset part is used on my website for something. This was my PI day blogpost, the title was a joke. Happy Pie eating :3