No exemplo abaixo eu mostro círculos criados com CSS:
See the Pen css-circulo by Andre Origamid (@origamid) on CodePen.
Bordas arredondadas eram criadas a partir de imagens e hacks bizarros feitos com CSS. O surgimento da propriedade border-radius acabou com essa gambiarra.
Basta adicionar border-radius: 5px; para arredondar as bordas com CSS.
E o que acontece se arredondarmos ao máximo as bordas de um quadrado? Ele vai virar um círculo.
Então basta adicionarmos border-radius: 50%; para transformamos um elemento que possui height e width iguais, em um círculo.
O valor precisa ter um valor igual ou maior que 50% do valor do width/height. Por exemplo um quadrado de 100px de largura e 100px de altura precisa de 50px de border-radius. (Basta usar sempre o 50%, assim você não precisa ficar dividindo esse valor).
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
}
Se você adicionar a propriedade overflow: hidden; as imagens que estiverem dentro dos círculos terão as pontas das suas bordas escondidas e ficarão contidas no círculo.
É assim que são criadas as maiorias das fotos de profile, dos aplicativos Web hoje em dia.
Os círculos podem ser usados de maneiras criativas, aqui no contato do meu site, eu uso eles para marcar os itens https://www.origamid.com/contato/