Propriedade CSS border-radius

A propriedade border-radius é usada para criar cantos arredondados na borda externa de um elemento. Ela funciona independentemente de o elemento ter ou não uma borda visível, e também recorta o plano de fundo e a sombra do box no formato arredondado. Esta página aborda a sintaxe abreviada, as regras de um a quatro valores, unidades em porcentagem versus comprimento, a sintaxe de barra para elipses e casos de uso comuns no mundo real.

A propriedade border-radius é uma das propriedades do CSS3.

Esta propriedade é uma propriedade abreviada para as propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius, que são usadas para definir os quatro cantos de um elemento separadamente. Porém, a propriedade border-radius pode ser usada para definir todos os quatro cantos ao mesmo tempo. Ela pode receber de um a quatro valores.

Se quatro valores forem fornecidos, eles se aplicam aos cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo, respectivamente. Se o valor do canto inferior esquerdo for omitido, ele assume o valor do canto superior direito. Se o valor do canto inferior direito for omitido, ele assume o valor do canto superior esquerdo. Se apenas dois valores forem fornecidos, o primeiro se aplica aos cantos superior esquerdo e inferior direito, e o segundo se aplica aos cantos superior direito e inferior esquerdo. Se apenas um valor for fornecido, ele se aplica a todos os quatro cantos.

A propriedade border-radius é especificada como:

um, dois, três ou quatro valores de comprimento ou porcentagem, utilizados para definir um único raio para os cantos.
seguidos opcionalmente por uma barra ( / ) e um, dois, três ou quatro valores de comprimento ou porcentagem. Isso é usado para definir um raio adicional, permitindo criar cantos elípticos.

O primeiro conjunto de valores (1-4) define o raio horizontal para todos os quatro cantos. Um segundo conjunto opcional de valores, precedido por uma barra, define os raios verticais para todos os quatro cantos. Se apenas um conjunto de valores for fornecido, esses valores serão usados para determinar tanto os raios verticais quanto os horizontais de forma igual.

Ao usar uma porcentagem, ela é resolvida em relação ao tamanho do próprio elemento: o raio horizontal é uma porcentagem da largura do box e o raio vertical é uma porcentagem de sua altura. É por isso que border-radius: 50% transforma um quadrado em um círculo perfeito, enquanto o mesmo valor em um retângulo produz uma elipse.

Valor Inicial	0
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não
Animável	Sim. Cada uma das propriedades da abreviação é animável.
Versão	CSS3
Sintaxe DOM	`object.style.borderRadius = "20px";` (Nota: JavaScript usa camelCase `borderRadius`, diferente do nome da propriedade CSS com hífen.)

Sintaxe

Sintaxe da propriedade CSS border-radius

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Exemplo da propriedade border-radius:

Exemplo da propriedade CSS border-radius

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Veja um exemplo com valores em porcentagem e pixel:

Exemplo da propriedade border-radius com valores em porcentagem e pixel:

Exemplo da propriedade CSS border-radius com valores em porcentagem e pixel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Experimente Você Mesmo »

Um valor em pixel fornece o mesmo raio de canto fixo independentemente de como o elemento é redimensionado, o que geralmente é o desejado para botões, cards e inputs. Uma porcentagem escala com o elemento, então border-radius: 50% em um elemento quadrado produz um círculo — um truque comum para avatares e badges.

Você também pode definir o border-radius para um elemento com cor de fundo ou imagem de fundo.

Exemplo da propriedade border-radius com as propriedades background-color e background-image:

Exemplo da propriedade CSS border-radius com cor de fundo e propriedades de imagem de fundo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Experimente Você Mesmo »

Nota: Em navegadores mais antigos, as imagens de fundo podem não ser recortadas nos cantos arredondados. Use background-clip: border-box; para garantir um comportamento consistente.

Agora vamos ver um exemplo com vários boxes com diferentes valores de border-radius que formam o formato dos boxes.

Exemplo da propriedade border-radius com múltiplos valores:

Exemplo da propriedade CSS border-radius com diferentes valores (%,px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Experimente Você Mesmo »

A sintaxe de barra (por exemplo border-radius: 10px 100px / 120px) separa os raios horizontais dos raios verticais, que é como você cria cantos assimétricos e elípticos em vez de simples quartos de círculo.

Casos de uso comuns

Botões e cards com cantos arredondados: um valor fixo pequeno como border-radius: 6px suaviza os cantos sem distorcer o formato.
Botões em formato de pílula: um valor grande como border-radius: 9999px arredonda completamente os lados curtos em uma cápsula.
Círculos e avatares: border-radius: 50% em um elemento quadrado (largura e altura iguais) produz um círculo perfeito.
Blobs decorativos: quatro valores percentuais diferentes, opcionalmente com a sintaxe /, criam formas orgânicas semelhantes a folhas.

Valores

Valor	Descrição	Experimente
length	Define o tamanho do arredondamento dos cantos.	Experimente »
%	Define o tamanho do arredondamento dos cantos em porcentagem.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS 'border-radius' faz?

Define o raio da borda da página.Determina a cor de fundo da borda.Controla a curvatura das bordas de um elemento.Permite criar cantos arredondados em um elemento.