15/08/2012

Bordas com CSS3 / 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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345