CSS Circles

I’m Cloud Four’s resident expert on circles. I didn’t plan to be. A while back, we worked on a project that involved a lot of circles… circular containers, circular thumbnails, circular buttons. Before I knew it, I became the guy to talk to if you were having trouble with circles and CSS. But I’ll let you in on a secret: There’s not a lot to know. By the end of this article, I have a feeling you’ll be an expert, too. There are several techniques for defining dynamic circular shapes in HTML and CSS, each with pros and cons. Here are the few I’ve experimented with the most, from most common to least. The most common technique is to round all corners by 50%. This is the simplest to apply, and is very widely supported. The border-radius property will also affect borders, shadows and the element’s touch/click target size. If you want the circle to stretch to a pill shape, set border-radius to half the element’s height instead of 50%. If the height is unknown, pick some arbitrarily large value (for example, 99em). SVGs can include a <circle/> element, which may be styled similarly to any other path. They are very well supported and performant to animate, but they require more markup than other techniques. To prevent visual clipping of the shape, make sure the circle’s radius (plus half its stroke width, if any) is slightly smaller than the SVG’s viewBox. Clip paths are a newer technique. Support is decent but less consistent. Clip paths do not impact the element’s layout, which means they will not affect borders and will likely hide outer shadows. This can be good or bad depending on what you’re trying to accomplish. We can use background-image and radial-gradient to visually fill an element with a circle. Any content will sit on top of that shape, but its layout (including touch/click target size) will be unaffected. This is my least favorite technique because the circle’s edges may appear jagged or fuzzy depending on the browser, but it may be a good fit for subtle background accents. Just about any technique for centering things with CSS may be used. But sometimes you may notice content that appears very slightly misaligned. While not unique to circular containers, their reduced surface area makes the problem extra noticeable. Comparison of centering techniques for different sized elements in Safari. Notice how some techniques have more visible jitter in the icon’s position relative to its container. This is due to the way browsers calculate sub-pixels. Any time we use relative units, viewport units or values from a modular scale, chances are we’re asking the browser to calculate fractional values like 22.78125px. Back in the day, this problem would break our grids or cause other fundamental issues. These days, browsers work very hard to vary their calculations depending on the element, property and context, but it isn’t perfect. In my experience, the most resilient and flexible method for centering uses a combination of absolute positioning (to establish a center point based on the parent element’s layout) and a transform (to place the child element with fuzzier math): Centering is fine and all, but what if we want imagery to fill a circle? We can crop an <img> element to a circle using border-radius: This has some limitations, though: The element is not responsive to its container. We can’t apply any inner shadows to help offset the image from its background (except in the image itself). We’re using object-fit: cover to prevent distortion of non-square images, but that isn’t supported in IE11. Here’s a…

Like to keep reading?

This article first appeared on cloudfour.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply