Criando cantos arredondados usando CSS [fechado]

253

Como posso criar cantos arredondados usando CSS?

Eldila
fonte
Aqui está um bom vídeo sobre como fazer cantos arredondados usando apenas CSS: < sampsonvideos.com/video.php?video=12 >
Stan
Artigo sobre técnicas de cantos arredondados da rede Yahoo Developer - desde 2007. E uma maneira de adicionar cantos arredondados (exigindo imagens) a um painel YUI l.
Simon_Weaver
3
Mais de 200 gostos dizem que é construtivo.
SteveCav
1
Eu acredito que esta é uma questão canônica valiosa que merece ser reaberta, especialmente porque agora é wiki da comunidade.
DavidRR
Exceto que são informações que são trivialmente encontradas em muitos, muitos outros lugares na web. Não há necessidade de o SO duplicar os recursos existentes.
Jim Garrison

Respostas:

102

Desde que o CSS3 foi introduzido, a melhor maneira de adicionar cantos arredondados usando CSS é usando a border-radiuspropriedade Você pode ler as especificações na propriedade ou obter algumas informações úteis sobre implementação no MDN :

Se você estiver usando um navegador que não implementa border-radius (Chrome pré-v4, Firefox pré-v4, IE8, Opera pré-v10.5, Safari pré-v5), os links abaixo detalham várias abordagens diferentes. Encontre um que se adapte ao seu site e estilo de codificação e siga-o.

  1. Design CSS: Criando cantos e bordas personalizados
  2. Cantos arredondados CSS 'Roundup'
  3. 25 técnicas de cantos arredondados com CSS
Yaakov Ellis
fonte
1
i encontrar dd_roundies ser a solução prefeito: dillerdesign.com/experiment/DD_roundies/#nogo
vsync
1
@vsync mas não é bem supportedin IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Jitendra Vyas
5
link útil se você decidir ir com CSS3 (como SO) border-radius.com (outro ref. css3.info/border-radius-apple-vs-mozilla )
mickthompson
terceiro elo não está funcionando cssjuice.com/25-rounded-corners-techniques-with-css
Krishna
80

Eu olhei para isso no início na criação do Stack Overflow e não consegui encontrar nenhum método para criar cantos arredondados que não me deixassem com a sensação de ter acabado de atravessar um esgoto.

O CSS3 finalmente define o

border-radius:

É exatamente assim que você deseja que funcione. Embora isso funcione bem nas versões mais recentes do Safari e Firefox, mas não no IE7 (e acho que não no IE8) ou no Opera.

Enquanto isso, são hacks até o fim. Estou interessado em ouvir o que outras pessoas pensam ser a maneira mais limpa de fazer isso no IE7, FF2 / 3, Safari3 e Opera 9.5 no momento.

Jeff Atwood
fonte
5
"... atravessou um esgoto?" Isso é um pouco duro, Jeff. A resposta é "Depende". Caixas de cor única, gradiente ou sombreamento? Eles precisam expandir verticalmente, horizontalmente ou ambos? Soluções diferentes para diferentes requisitos. Quanto mais extravagante for o requisito, mais semelhante à solução de esgoto.
Carl Camera
28
Eu preferiria usar esse método. Se um navegador não suporta, quem se importa?
Sam Murray-Sutton
11
O Twitter reduz o recurso de canto arredondado para cantos pontiagudos em seu site para os usuários do IE. Nada de mais, na verdade.
Lance Fisher
5
Definitivamente, eu usaria essa abordagem - vamos lidar com as coisas como elas são. Se alguém não usa um navegador (ie IE), merece ver os cantos arredondados como angulares. :)
thSoft
1
Eu quero votar nesta resposta, porque ela não descreve o que o respondente (Jeff) acha que é o melhor caminho.
Allyourcode
27

Geralmente, recebo cantos arredondados apenas com css, se o navegador não suportar, eles veem o conteúdo com cantos planos. Se os cantos arredondados não são tão críticos para o seu site, você pode usar estas linhas abaixo.

Se você deseja usar todos os cantos com o mesmo raio, esta é a maneira mais fácil:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

mas se você quiser controlar todos os cantos, isso é bom:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Como você vê em cada conjunto, você tem estilos específicos de navegador e, nas quarta linhas, declaramos de maneira padrão por isso assumimos que, no futuro, os outros (esperamos que o IE também) decidam implementar o recurso para que nosso estilo esteja pronto para eles também.

Como dito em outras respostas, isso funciona perfeitamente no Firefox, Safari, Camino, Chrome.

Sinan
fonte
16

Se você estiver interessado em criar cantos no IE, isso poderá ser útil - http://css3pie.com/

Farejador
fonte
isso funcionou completamente para mim, além de definir os cantos -moz etc etc para outros navegadores.
precisa saber é
13

Eu recomendaria o uso de imagens de fundo. As outras maneiras não são tão boas: sem anti-aliasing e marcação sem sentido. Este não é o lugar para usar JavaScript.

Lance Fisher
fonte
1
javascript definitivamente tem o escopo mais alto para falhas e oscilações na minha experiência. todos os plugins jQuery Eu tentei ter algum tipo de efeitos colaterais inesperados
Simon_Weaver
CurvyCorners ( curvycorners.net ) e ShadedBorder ( ruzee.com/blog/shadedborder ) não conseguem suportar anti-aliasing. Também existem maneiras de usar essas sem marcação extra, você pode implementar com uma classe e, em seguida, a marcação é adicionada dinamicamente aos elementos classificados. Dito isto, quanto mais eu os uso, mais você parece certo ... eles são úteis para a criação de protótipos, mas adicionam muito peso extra ao DOM. Agora que tenho o meu ajustado da maneira que quero, pretendo convertê-los em imagens.
22711 Ben Regenspan
1
Esta resposta não contém detalhes suficientes para alguém implementar o que o respondente está pensando.
allyourcode
11

Como Brajeshwar disse: Usando o border-radiusseletor css3. Até agora, você pode aplicar -moz-border-radiuse -webkit-border-radiuspara navegadores baseados em Mozilla e Webkit, respectivamente.

Então, o que acontece com o Internet Explorer? A Microsoft tem muitos comportamentos para fazer com que o Internet Explorer tenha alguns recursos extras e obtenha mais habilidades.

Aqui: um .htcarquivo de comportamento para obter round-cornersde border-radiusvalor no seu CSS. Por exemplo.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Obviamente, o seletor de comportamento não é um seletor válido, mas você pode colocá-lo em um arquivo css diferente com comentários condicionais (apenas para o IE).

O arquivo HTC de comportamento

juanpablob
fonte
4
nunca entendi por que tantos estão preocupados com a validação de CSS. não importa nada, apenas a validação do DOM é importante.
vsync
Parece o caminho a seguir.
Matthew Olenik
3
Você pode adicionar uma breve explicação sobre o que é um arquivo de comportamento? Acho que quem procura uma resposta para essa pergunta provavelmente não vai se familiarizar com isso.
usar o seguinte código
2
Parece que o link do arquivo de comportamento está morto
evanmcd
9

Com o suporte ao CSS3 sendo implementado nas versões mais recentes do Firefox, Safari e Chrome, também será útil consultar "Border Radius".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Como qualquer outra abreviação de CSS, o texto acima também pode ser escrito em formato expandido e, assim, alcançar um raio de borda diferente para o topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;
Brajeshwar
fonte
1
Sua sintaxe para -webkit-border-bottom-righttright-radius: 3px; e -webkit-border-top-righttright-ray: 10px; deve ler -webkit-border-bottom-right-radius: 3px e -webkit-border-top-right-radius: 10px;
Wolfr 03/05/09
8

jQuery é a maneira como eu lidaria com isso pessoalmente. O suporte a css é mínimo, as imagens são muito complicadas, para poder selecionar os elementos que você deseja ter cantos arredondados no jQuery faz todo o sentido para mim, embora alguns sem dúvida discutam o contrário. Existe um plugin que usei recentemente para um projeto em andamento aqui: http://plugins.jquery.com/project/jquery-roundcorners-canvas

mcaulay
fonte
@mcaulay - Ele também suporta dar uma sombra à caixa?
Nickytonline #
jquery roundcorners não suporta o IE 8.
evanmcd
6

Sempre existe a maneira JavaScript (veja outras respostas), mas como é puramente estiloso, sou contra o uso de scripts de cliente para conseguir isso.

A maneira como prefiro (embora tenha limites) é usar 4 imagens de cantos arredondados que você posicionará nos 4 cantos da sua caixa usando CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Como mencionado, ele tem seus limites (o plano de fundo atrás da caixa arredondada deve ser simples, caso contrário os cantos não coincidem com o plano de fundo), mas funciona muito bem para qualquer outra coisa.


Atualizado: aprimorou a implentação usando uma folha de sprite.

mbillard
fonte
Tudo pode ser simplificado usando sprites CSS, talvez eu atualize minha resposta.
mbillard
Atualizei o código para usar uma folha de sprite.
mbillard
5

No Safari, Chrome, Firefox> 2, IE> 8 e Konquerer (e provavelmente outros), você pode fazer isso em CSS usando a border-radiuspropriedade Como ainda não faz parte oficialmente das especificações, use um prefixo específico do fornecedor ...

Exemplo

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

As soluções JavaScript geralmente adicionam um monte de divs pequenos para parecer arredondado ou usam bordas e margens negativas para criar cantos com 1px. Alguns também podem utilizar SVG no IE.

Na IMO, a maneira CSS é melhor, pois é fácil e será degradada normalmente em navegadores que não a suportam. Obviamente, esse é apenas o caso em que o cliente não os aplica em navegadores não suportados, como o IE <9.

alex
fonte
5

Aqui está uma solução HTML / js / css que eu fiz recentemente. Há um erro de arredondamento de 1px com posicionamento absoluto no IE, então você deseja que o contêiner tenha um número par de pixels de largura, mas é bastante limpo.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

A imagem tem apenas 18 px de largura e tem todos os 4 cantos juntos. Parece um círculo.

Nota: você não precisa do segundo invólucro interno, mas eu gosto de usar a margem no invólucro interno para que as margens dos parágrafos e títulos ainda mantenham o colapso da margem. Você também pode pular o jquery e apenas colocar o invólucro interno no html.

Jethro Larson
fonte
3

Como uma indicação de quão complexo é o funcionamento de cantos arredondados, até o Yahoo os desencoraja (consulte o primeiro ponto com marcadores)! É verdade que eles estão falando apenas de cantos arredondados com 1 pixel nesse artigo, mas é interessante ver que mesmo uma empresa com sua experiência concluiu que é muita dor para fazê-los trabalhar a maior parte do tempo.

Se o seu design pode sobreviver sem eles, essa é a solução mais fácil.

Simon_Weaver
fonte
Quero encontrar a parte da página da YUI de que você está falando, mas nenhum dos pontos principais que eu observei diz que tentar obter cantos arredondados é uma má idéia. Você pode ser mais específico? Encontrei uma parte que discute as conversas sobre como você deve definir suas larguras de maneira diferente ao usar cantos arredondados, mas não a desencoraja.
usar o seguinte código
@allourcode - eu não vejo mais isso. Lembro-me de fazer este post, mas não exatamente o que eles disseram. no entanto, no segundo link acima, eles mencionam a remoção do suporte do IE para cantos arredondados de 1px. mas em qualquer caso, este post foi um pouco insolente, já que eles estão falando apenas de cantos de 1px, o que eu acho que é uma tremenda perda de tempo! eu me lembro no momento que eu escrevi este ser frustrado em geral, com cantos arredondados, e estabeleceu-se em imagens de canto
Simon_Weaver
2

Claro, se é uma largura fixa, é super fácil usar CSS, e nem um pouco ofensivo ou trabalhoso. É quando você precisa escalar nas duas direções que as coisas ficam instáveis. Algumas das soluções têm uma quantidade impressionante de divs empilhadas umas sobre as outras para que isso aconteça.

Minha solução é ditar ao designer que, se ele quiser usar cantos arredondados (por enquanto), ele precisará ter uma largura fixa. Os designers adoram cantos arredondados (eu também), então acho que esse é um compromisso razoável.

CarmineSantini
fonte
2

O Ruzee Borders é a única solução de canto arredondado sem serrilhado baseada em Javascript que achei que funciona em todos os principais navegadores (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8) e TAMBÉM é a única que funciona quando o elemento arredondado E o elemento pai contêm uma imagem de plano de fundo. Ele também faz bordas, sombras e brilho.

O RUZEE.ShadedBorder mais recente é outra opção, mas falta suporte para obter informações de estilo de CSS.

Nathan Chase
fonte
1

Se você quiser usar a solução border-radius, existe este site incrível para gerar o css que o fará funcionar no safari / chrome / FF.

Enfim, acho que seu design não deve depender do canto arredondado, e se você olhar para o Twitter, eles apenas dizem F **** para IE e usuários de ópera. É bom ter cantos arredondados, e eu pessoalmente estou bem em manter isso para os usuários legais que não usam o IE :).

Agora, claro, não é a opinião dos clientes. Aqui está o link: http://border-radius.com/

Stéphane
fonte
1

Não existe "o melhor" caminho; existem maneiras que funcionam para você e maneiras que não. Dito isto, publiquei um artigo sobre como criar uma técnica de canto arredondado com base em CSS + Image aqui:

Caixa com cantos redondos usando CSS e imagens - Parte 2

Uma visão geral desse truque é aquela que usa DIVs aninhados e repetição e posicionamento da imagem de fundo. Para layouts de largura fixa (altura elástica de largura fixa), você precisará de três DIVs e três imagens. Para um layout de largura de fluido (largura e altura extensíveis), você precisará de nove DIVs e nove imagens. Alguns podem considerá-lo muito complicado, mas o IMHO é a solução mais limpa de todos os tempos. Sem hacks, sem JavaScript.

Salman A
fonte
0

Eu escrevi um artigo de blog sobre isso há um tempo, então para mais informações, veja aqui

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Funciona muito bem. Não é necessário Javascript, apenas CSS e HTML. Com HTML mínimo interferindo nas outras coisas. É muito parecido com o que o Mono postou, mas não contém nenhum hacker específico do IE 6 e, após a verificação, parece não funcionar. Além disso, outro truque é tornar a parte interna de cada imagem de canto transparente para não bloquear o texto próximo ao canto. A parte externa não deve ser transparente para poder cobrir a borda da div não arredondada.

Além disso, quando o CSS3 for amplamente suportado com raio de borda, essa será a melhor maneira oficial de fazer cantos arredondados.

Kibbee
fonte
0

Não use CSS, o jQuery foi mencionado várias vezes. Se você precisar de controle total do plano de fundo e da borda de seus elementos, experimente o jQuery Background Canvas Plugin . Ele coloca um elemento Canvas HTML5 em segundo plano e permite desenhar todos os fundos ou bordas que você deseja. Cantos arredondados, gradientes e assim por diante.

Thomas Maierhofer
fonte