Criar bordas e cantos arredondados em CSS

Por | Atualizado em 2015-04-10

Hoje o Montar um Blog irá explicar como criar bordas ou cantos arredondados em CSS. Para melhor compreensão visualize os nossos exemplos.

Para criar as bordas/cantos arredondados terá de utilizar as propriedades “Border-radious”. De salientar que, esta funcionalidade é suportada por todos os navegadores, incluindo o Internet Explorer (versão 9 ou superior).

Cantos arredondados em CSS

Em primeiro lugar, terá de declarar a propriedade “Border-Radius” no código CSS do objeto que pretende personalizar.

Num exemplo prático, o CSS do objeto seria declarado assim:

<head>
<style type="text/css">
#exemplo
{
border:2px solid #000000;
padding:10px 40px;
background:#ffffff;
width:350px;
border-radius:20px;
}
</style>
</head>

Chamada do objecto no seu código HTML:

<div id=”exemplo”>Um exemplo do site Montar um Blog.</div>

Resultado:

Criar bordas e cantos arredondados em CSS

Arrendondar Cantos em CSS

Se deseja arredondar apenas um canto especifico, deverá utilizar os seguintes códigos “Border-Radious”:

Topo Esquerdo arredondado:

border-top-left-radius:2em;
-webkit-border-top-left-radius:2em; (para funcionar no Safari)

Exemplo:

superior esquerdo arredondado

Canto inferior esquerdo arredondado

border-bottom-left-radius:2em;

inferior esquerdo arredondado

Canto superior direito arredondado

border-top-right-radius:2em;
-webkit-border-top-right-radius:2em; (para funcionar no Safari)

canto superior direito arredondado

Canto inferior direito arredondado

border-bottom-right-radius:2em;

canto inferior direito arredondado

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *