CSS Circles #Web Design

6 months ago
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…

Leave a Reply