18

Sei fazer um círculo no css com border-radius.

.circle{
    border-radius:100%;
    border:10px solid red;
    width:100px;
    height:100px;
    background-color:purple;
}
<div class="circle"></div>

Porém gostaria de saber se existe outra forma, além dessa, em CSS.

8
  • 1
    Tem como usar imagem, da uma olhada .html5rocks.com/en/tutorials/shapes/getting-started/… Commented 1/12/2015 às 15:47
  • Não, imagem não, por favor! Commented 1/12/2015 às 15:50
  • Retiro o que disse. Interessante @PauloHDSousa Commented 1/12/2015 às 15:50
  • 2
    É simples, use border-radius 50% :P - Brincadeiras à parte, 50% faz mais sentido, pois cada borda pega só 50% da horizontal e da vertical. Quando você põe 100%, o browser tá "ajeitando" a medida na marra.
    – Largato
    Commented 1/12/2015 às 16:18
  • 2
    Após ler as respostas uma coisa posso notar, border-radius para a maior parte das necessidades sempre vai ser mais prático que qualquer outra coisa.
    – Syzoth
    Commented 16/11/2017 às 16:45

5 Respostas 5

22
+50

Simples: usando border-radius: 50%, que seria mais correto. Cada quadrante atingido pelo radius só pega metade da largura/altura, não tem muito sentido 100%. É o que precisa pra grande maioria dos casos. Só não pode esquecer do overflow-hidden se tiver conteúdo que possa "escapar" nas quinas.

Mas para não deixar de responder, que tal apenas usando o background do CSS, com um degradê radial?

background: radial-gradient(ellipse at center,#f00 0%,#f00 0%,#f00 67%,rgba(0,0,0,0) 70%);


Veja em ação:

#circulo1 {
  background: radial-gradient(circle closest-side,#f00 0%,#f00 98%,rgba(0,0,0,0) 100%);
}

#circulo2 {
  background: radial-gradient(circle closest-side,
     #999 0%,#999 74%,#e00 76%,#e00 98%,rgba(0,0,0,0) 100%);
}

#circulo3 {
  background:radial-gradient(circle closest-side,
     rgba(0,0,0,0) 0%,rgba(0,0,0,0) 78%,#fff 80%,#fff 94%,
     #36f 96%,#36f 99%,#fff 100%),
     url(https://i.sstatic.net/MVmIb.png) no-repeat center/160px 160px;
}

body {background-color:#fff}
div {width:160px;height:160px;float:left;margin:10px}
<div id="circulo1"></div>
<div id="circulo2"></div>
<div id="circulo3"></div>

Notar que as duas primeiras tem transparência no entorno, mas terceira depende de se acertar o gradient com o fundo da página.

1
  • 2
    Muito interessante @Bacco.
    – David
    Commented 2/12/2015 às 0:27
14

Se SVG for uma opção

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Eu sei que não tem CSS aí no meio, mas fica registrada uma opção. SVG tá bem em alta no momento, e esse artigo do css-tricks mostra uma série de coisas que podem ser feitas com ele. Aliás, recomendo uma análise da logo desse site, que tem um easter egg bem bacana!

EDIT

A logo do site não tem mais o easter egg que eu comentei. =(

4
  • 1
    É tipo como se fosse uma imagem, só que ao mesmo tempo "só que não". Commented 1/12/2015 às 16:03
  • É por aí, @WallaceMaxters. SVG é poderosíssimo, vale a pena estudá-lo Commented 1/12/2015 às 16:15
  • 1
    Meu cérebro está tentando entender o -1 até agora ;) Commented 1/12/2015 às 16:36
  • La vida es dura, @WallaceMaxters =/ Commented 1/12/2015 às 16:56
7

Fora border-radius e background se o seu desejo for realmente usar nas imagens você pode experimentar o clip-path:

Usando clip-path: circle

.arredondar {
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
}
<img class="arredondar" src="https://i.sstatic.net/ShnZP.png?s=328&g=1">

Usando clip-path com borda (simulada)

.arredondar {
    display: inline-block;
    background-color: #f00;
    padding: 25px;
    font-size: 0; /*remove "white spaces"*/
}

.arredondar, .arredondar img {
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
}
<div class="arredondar"><img src="https://i.sstatic.net/ShnZP.png?s=328&g=1"></div>


Suporte

Conforme o CanIUse o suporte ainda é um pouco limitado, navegadores com suporte:

  • Firefox 52 (suporte parcial)
  • Firefox 55+
  • Chrome 49 (suporte parcial com prefixo)
  • Chrome 60 (suporte parcial - Opera usa a mesma tecnologia do Chrome)
  • Safari (suporte parcial com prefixo)

É importante notar que pela MDN ainda é considerado uma tecnologia experimental

2

Vou dar uma resposta que pode ser considera um pouco deselegante, mas como não foram colocadas regras a não ser que seja com CSS e sem border-radius ai vai mais uma sugestão (mesmo que "polêmica")...

Primeiro vc vai precisar de uma fonte bem geométrica tipo a Futura, que tem a letra O como um circulo perfeito. Outro detalhe, quanto mais "grosso" o traço da fonte mais fácil de fazer o efeito, então quanto mais Bold melhor

No meu exemplo eu usei uma fonte nesses requisitos que achei no Google Fonts a Montserrat

Depois disso eu apenas criei alguns estilos de css para elementos ::after que usei para cobrir os "olhos" dos caracteres. Resumindo basta usar pseudo elementos para tampar os buracos da fonte e ter o circulo perfeito e outras formas...

Veja o resultado no exemplo:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: azure;
}
.container {
    position: relative;
    z-index: 1;
}
.texto {
    font-family: 'Montserrat', Verdana, sans-serif;
    font-weight: bold;
    color: red;
    font-size: 10rem;
    position: relative;
    text-transform: uppercase;
}
.texto-o::after, .texto-p::after, .texto-a::after {
    content: "";
    position: absolute;
    background-color: red;
    z-index: -1;
}
.texto-o::after {
    top: 30%;
    left: 25%;
    width: 50%;
    height: 45%;
}
.texto-p::after {
    top: 30%;
    left: 20%;
    width: 60%;
    height: 25%;
    background-color: rgba(255,0,0,0.75);
}
.texto-a::after {
    top: 30%;
    left: 35%;
    width: 30%;
    height: 35%;
    background-image: url(http://unsplash.it/40/40);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">

<div class="container">
    <span class="texto texto-o">o</span>
    <span class="texto texto-p">p</span>
    <span class="texto texto-a">a</span>
    <span class="texto">!</span>
</div>

OBS: funciona do IE8 pra cima https://caniuse.com/#feat=css-gencontent

-3
<img class=”element” src=”image.png” />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Fonte:http://www.html5rocks.com/en/tutorials/shapes/getting-started/?redirect_from_locale=pt

3
  • Retirei o voto. Não funcionou Commented 1/12/2015 às 15:58
  • Trágico... Trágico... Commented 1/12/2015 às 16:00
  • 2
    Só pra constar Paulo, não fui eu quem negativou, na verdade eu nunca tinha notado esta pergunta e respostas, no entanto preciso comentar, o shape-outside não funciona da maneira que você presumiu, no caso só vai funcionar se a imagem já for arredondada, logo o efeito dele é no "texto" e não vai criar bordas arredondadas. Quero ressaltar que é uma tecnologia considerada experimental ainda e que somente o Chrome suporta (Firefox e Edge não suportam e Safari só com prefixo).
    – Syzoth
    Commented 16/11/2017 às 16:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .