Como Fazer Borda Arredondada com CSS

Bordas arredondadas nos elementos HTML( O que é html? ) é uma das várias novidades do css3. Com ela deixamos de usar aquele velho truque de adicionar imagens para conseguir as bordas arredondadas, evitando requisições desnecessárias.

 

Borda Arredondada CSS

 

Como fazer?

Para adicionar as bordas arredondadas é usado a regra border-radius que indica o valor da distância que a borda terá. Quando utilizada em sua versão abreviada, a regra border-radius pode receber até 4 valores, onde cada valor é respectivo de um canto do elemento.

DIV com bordas arredondadas
/* largura e altura da div */
width:100px;
height:100px;

/* cor de fundo da div */
background-color:#000000;

/* borda arredondada da div para webkit*/
-webkit-border-radius: 10px 10px 30px 30px;

}

/* borda arredondada da div para moz*/
-moz-border-radius: 10px 10px 30px 30px;

}

 

No código acima é definido os valores das bordas da div. O primeiro valor indica a borda esquerda superior, o segundo indica a borda direita superior, o terceiro indica a borda direita inferior e o quarto a borda esquerda inferior, ou seja, em sentido horário.Você pode indicar somente 1 valor que se aplicará em todos os quatro cantos da div.

 

#minha_div{

...

/* borda arredondada da div para webkit*/
-webkit-border-radius: 10px;

/* borda arredondada da div moz*/
-moz-border-radius: 10px;

}

 

Utilizando as regras separadas, basta indicar os seguintes valores:

-moz-border-radius-topleft / -webkit-border-top-left-radius *esquerdo superior
-moz-border-radius-topright / -webkit-border-top-right-radius *direito superior
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius *esquerdo inferior
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius *direito inferior

 

E tem mais. O border-radius permite definir os valores x e y da curva independentemente.

 

valor x e y

valor x e y

 

Colocando o valor de x e y separadamente, você conseguirá criar curvas mais acentuadas para a direção desejada.

DIV com bordas acentuadas

 

/* largura e altura da div */

...

/* borda arredondada da div para webkit*/
-webkit-border-radius: 10px 10px 30px 30px / 20px 20px 5px 5px;

}

/* borda arredondada da div para moz*/
-moz-border-radius: 10px 10px 30px 30px/ 20px 20px 5px 5px;

}

 

Jonathan Gabetta

facebooktwittergoogle plus


Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>