Bordas arredondadas + sombra em CSS

Postado por em
Também denominado border radius (bordas arredondadas) e box shadow (bordas sombreadas), segue o código para configuração nos maiores navegadores disponíveis atualmente.


arredondando

  • safari, chrome: -webkit-border-radius:20px;
  • firefox: -moz-border-radius:20px;
  • opera: border-radius:20px;

exemplo


<blockquote style='border:1px solid #f00; padding:2em; background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; '>
 
</blockquote>

sombra

  • safari, chrome: -webkit-box-shadow:10px 10px 5px #888;
  • firefox: -moz-box-shadow:10px 10px 5px #888;
  • opera: box-shadow:10px 10px 5px #888;

exemplo

<blockquote style='border:1px solid #f00; padding:2em; background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888;'>
 
</blockquote>

Efeito de borda

exemplo

< blockquote style="background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; border: 1px solid #bbb; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-left-width:8px"> < /blockquote>

Efeito de borda com sombra

exemplo

<blockquote style='border:1px solid #f00; padding:2em; background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888; border-left-width:8px;'>
 
</blockquote>

Efeito de bordas laterais

exemplo

<blockquote style='border:1px solid #f00; border-left-width: 1em; border-right-width: 1em; padding:2em; background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;'>
 
</blockquote>

Efeito de bordas laterais com sombras

exemplo

<blockquote style='border:1px solid #f00; border-left-width: 1em; border-right-width: 1em; padding:2em; background-color:#eee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888; border-left-width:8px;'>
 
</blockquote>
Atualizado em 02/09/2013 as 6.00h, e a ultima data apresentada.

Comentários

Postar um comentário