15/08/2012

Tutorial: Colocando Bordas com CSS3

||

Yoo meus amores, vou mostra a vocês como colocar bordas arredondadas dentro da postagem do blog usando CSS3. O efeito funciona muito bem, e claro menos no  Internet Explorer ahhh que orrivel, porque o IE não mostra qualquer efeito se quer, o mais simples que seja. Mas voltando ao assunto vamos ver como vocês colocam bordas personalizadas.

1º Estilo

Ohhhhh Quero comer Lamen!!!!!

<div style="background:#CD853F;color:#A0522D;
border: #000 5px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">Ohhhhh Quero comer Lamen!!!!!</div>


2º Estilo

Ohhhhh Quero comer Lamen!!!!!

<div style="background:#CD853F; color:#A0522D; border: #A0522D 10px solid; padding: 10px; -moz-border-radius:0 20px;-webkit-border-radius:0 20px;border-radius:0 20px;">Ohhhhh Quero comer Lamen!!!!!</div>


3º Estilo
Ohhhhh Quero comer Lamen!!!!!

<div style="background:#CD853F; color:#A0522D; border: #A0522D 10px solid; padding: 10px; -moz-border-radius:20px 0;-webkit-border-radius:20px 0;border-radius:20px 0;">Ohhhhh Quero comer Lamen!!!!!.</div>


4º Estilo
Ohhhhh Quero comer Lamen!!!!!

<div style="background:#CD853F;color:#A0522D;
border: #A0522D 1px solid;padding: 10px;border-radius:10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;">Ohhhhh Quero comer Lamen!!!!!</div>


5º Estilo

Ohhhhh Quero comer Lamen!!!!!

<div style="background:#CD853F;color:#A0522D;border: #A0522D 1px solid;padding: 10px;border-radius:0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;">Ohhhhh Quero comer Lamen!!!!!</div>


Bom agora se você desejar usar o exemplos em alguma propriedade do seu HTML:

1º Estilo

border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

2º Estilo

-moz-border-radius:0 20px;
-webkit-border-radius:0 20px;
border-radius:0 20px;

3º Estilo

-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;

4º Estilo

border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;

5º Estilo

border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;


Bom, espero que você tenham gostado beijokas a todos!

2 comentários:

  1. Anônimo12/4/13

    òooo ameei o Blog tãaaoo fofoo!beijinhoos :)
    AH queria saber se vc tem tuto de colocar bordas personalizadas apenas do lado direito e esquerdo da postagem do blog,espero respostaas!*-*

    ResponderExcluir
  2. farei um tutu explicando ^^

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram