Criando cantos arredondados usando CSS [fechado]

Como posso criar cantos arredondados usando CSS?

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

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.

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.

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

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.

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

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;

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

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.

Pessoalmente, eu gosto dessa solução da melhor maneira, é um .htc que permite ao IE renderizar bordas curvas.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

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.

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.

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.

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.

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.

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/

Além das soluções htc mencionadas acima, aqui estão outras soluções e exemplos para alcançar cantos arredondados no IE .

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.

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.

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.

O Opera ainda não suporta o raio da borda (aparentemente estará no lançamento após a versão 10). Enquanto isso, você pode usar CSS para definir um plano de fundo SVG para criar um efeito semelhante .