<< Click to Display Table of Contents >> Navigation:  CSS > Bordas arredondadas com CSS

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;

 

 

Observações

 

 

Mais exemplos

 

 

#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;

}