border-radius

Sumário

A propriedade CSS border-radius permite definir como bordas arredondadas são. A curva de cada esquina é definida usando um ou dois raios, definindo sua forma: círculo ou elipse.

Imagens das esquinas arredondadas com CSS3: Sem esquina arredondada, arredondado usando um arco de círculo, arredondado usando um arco de elípse

O raio é aplicável a todo o background, mesmo se o elemento não tiver borda; a posição exata do recorte é definido pela propriedade background-clip.

Esta propriedade é um shorthand para definir as quatro propriedades border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) e border-bottom-left-radius (en-US).

Nota: Como com qualquer propriedade shorthand, valores individuais herdados não são possíveis, isto é, border-radius: 0 0 inherit inherit, que substituiria definições parciais existentes. Neste caso, a propriedade individual longhand deve ser usada.

Initial value	as each of the properties of the shorthand: `border-top-left-radius` (en-US): `0` `border-top-right-radius` (en-US): `0` `border-bottom-right-radius` (en-US): `0` `border-bottom-left-radius` (en-US): `0`
Aplica-se a	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` (en-US) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
Inherited	não
Percentages	refer to the corresponding dimension of the border box
Computed value	as each of the properties of the shorthand: `border-bottom-left-radius` (en-US): two absolute `length` (en-US)s or `percentage` (en-US)s `border-bottom-right-radius` (en-US): two absolute `length` (en-US)s or `percentage` (en-US)s `border-top-left-radius` (en-US): two absolute `length` (en-US)s or `percentage` (en-US)s `border-top-right-radius` (en-US): two absolute `length` (en-US)s or `percentage` (en-US)s
Animation type	as each of the properties of the shorthand: `border-top-left-radius` (en-US): a length, percentage or calc(); `border-top-right-radius` (en-US): a length, percentage or calc(); `border-bottom-right-radius` (en-US): a length, percentage or calc(); `border-bottom-left-radius` (en-US): a length, percentage or calc();

Sintaxe

/* A sintaxe do primeiro raio permite de um a quatro valores */
/* O raio é definido para todos os 4 lados */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* A sintaxe do segundo raio permite de um a quatro valores */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

border-radius: inherit;

Valores

radius		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a `<length>` (en-US) or a `<percentage>` (en-US) denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
`inherit`		Is a keyword indicating that all four values are inherited from their parent's element calculated value.

<length>: Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> (en-US) data types. Negative values are invalid.
<percentage>: Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

border-radius: 1em/5em;

/* is equivalent to */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Sintaxe formal

border-radius = 
  <length-percentage [0,∞]> (en-US){1,4} [ / <length-percentage [0,∞]> (en-US){1,4} ]?  

<length-percentage> = 
  <length> (en-US)      |
  <percentage> (en-US)

Examples

  border: solid 10px;
  /* the border will curve into a 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

Live Samples

Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/

Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/

Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/

Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/

Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/

Notas

Prior to Firefox 50, dotted and dashed rounded border corners were rendered as solid; see bug 382721.
border-radius does not apply to table elements when border-collapse (en-US) is collapse.
Old versions of WebKit handle multiple values differently, see below.

Especificações

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'border-radius' in that specification.	Candidata a Recomendação	Initial definition

Compatibilidade

BCD tables only load in the browser

Veja também

Border-radius-related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)