Bordas arredondadas com CSS

<< Click to Display Table of Contents >>

Navigation:  CSS >

Bordas arredondadas com CSS

Previous pageReturn to chapter overviewNext page

Modo simples|

 

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

 


 

Possibilidades

 

border-bottom-left-radius

border-bottom-right-radius

border-top-left-radius

border-top-right-radius

 

Sintaxe

 

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

 

Exemplos

 

border-top-left-radius: 10px 5px;

border-bottom-right-radius: 10% 5%;

border-top-right-radius: 10px;

 

border-radius-diagram-12

 

Observações

 

W3C Specification (CSS3)

Mozilla Implementation (Firefox)

Webkit (Safari e Chrome)

border-radius

-moz-border-radius

-webkit-border-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-top-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

 

Mais exemplos

 

redondo

 

#Example_A

{

  height: 65px;

  width: 160px;

  -moz-border-radius-bottomright: 50px;

  border-bottom-right-radius: 50px;

}

 

#Example_B

{

  height: 65px;

  width: 160px;

  -moz-border-radius-bottomright: 50px 25px;

  border-bottom-right-radius: 50px 25px;

}

 

#Example_C

{

  height: 65px;

  width: 160px;

  -moz-border-radius-bottomright: 25px 50px;

  border-bottom-right-radius: 25px 50px;

}

 

#Example_D

{

  height: 5em;

  width: 12em;

  -moz-border-radius: 1em 4em 1em 4em;

  border-radius: 1em 4em 1em 4em;

}

 

#Example_E

{

  height: 65px;

  width: 160px;

  -moz-border-radius: 25px 10px / 10px 25px;

  border-radius: 25px 10px / 10px 25px;

}

 

#Example_F

{

  height: 70px;

  width: 70px;

  -moz-border-radius: 35px;

  border-radius: 35px;

}