Criando Bordas Arredondadas com CSS3

 Olá novamente eu Lord Seven trazendo mais um tutorial de CSS3 para vocês. Hoje vamos aprender a criar bordas arredondadas no blogger. Veja um exemplo abaixo:

UpTutoriais - designers de verdade!

Nota:
- A maioria das bordas arredondadas não funcionam no Internet Explorer


Vamos ao tutorial:
Você pode facilmente inserir bordas arredondadas (bordas radius) em seu blog sem precisar mexer em seu HTML, muito bem vamos criar um gadget > HTML/ JavaScript  Ou uma postagem > HTML e cole os códigos da borda que você preferir e altere do seu gosto.

Borda 01:

UpTutoriais - designers de verdade!

<div style="background:greenyellow ;color:#000000;

border: #000 0px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">SEU TEXTO</div>

Borda 02

UpTutoriais - designers de verdade!

<div style="background-color:#c0c0c0; background-position: initial initial; background-repeat: intial intial: border-bottom-left-radius: 10px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border: 4px solid rgb(79,79,79) ; pading: 10px/ "> <span style="color: #E8E8E8; "><b>SEU TEXTO</b></span></div>

 
Borda 03:

UpTutoriais - designers de verdade!

<div style="-moz-border-radius:0 20px; -webkit-border-radius: 0 20px; background: #7EC0EE; border-radius: 0 20px; border: #00B2EE 5px solid; color:white: padding: 10px;">SEU TEXTO</div> 

ALTERAÇÃO:
Agora vamos alterar o código, para isso irei usar o código de uma das bordas acima e destacarei as cores para mais fácil entendimento. Veja abaixo o código exemplo:

<div style="background-color:#c0c0c0; background-position: initial initial; background-repeat: intial intial: border-bottom-left-radius: 10px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border: 4px solid rgb(79,79,79) ; pading: 10px/ "> <span style="color: #E8E8E8; "><b>SEU TEXTO</b></span></div> 

Muito colorido né? esquenta não é fácil de entender:
Cor vermelha: cor de fundo do espaço;
Cor verde: nível radius da borda do lado esquerdo;
Cor verde água: nível radius da borda do lado direito;
Cor preta: nível radius esquerdo do topo da borda;
Cor vinho: nível radius direito do topo da borda;
Cor laranja: tamanho da borda;
Cor amarela: cor do texto;
Cor rosa: texto que aparecerá dentro do espaço;

- "Nível radius": o tanto que será arredondado;