Vamos hoje aprender a fazer um elemento ficar com bordas arredondadas isso serve para qualquer elemento que pode ser modificado com CSS (div's,tabelas,form)
Primeiro Passo!
Então nosso primeiro passo é criar o elemento que vai ter a borda arredondada
<div id="bordasarredondadas"> - É o elemento, o id é o nome dado a este elemento que mais adiante usaremos para declarar que a div com o id bordasarredondas é para ficar com a borda arredondadaNossa Borda Arredondada
Segundo Passo!
Agora vamos para a parte do CSS. Nesta parte você pode fazer em um arquivo que seja .css ou até .html.
Se o seu arquivo for .html você devera colocar o CSS entre as tag <head></head> ficando assim:
Se o seu arquivo é .css que é recomendado:
<style></style> - é para o navegador identificar que tudo que estiver escrito entre esta tag é CSS fora dela não vai funcionar
#bordasarrendondadas - Este é ID da div que vai identificar a mesma.
-webkit-border-radius: 20px; - este serve para os internet explorer mais antigo intender que o elemento vai ficar com a bordas arredondadas 20px. Sem ele no internet explorer 7,8 não vai funcionar
border-radius: 20px; - Você pode mudar o arredondamento da borda para quantos pixel você quiser alterando o 20px quanto mais pixels mais redonda ela fica e quanto menos mais quadrada.
background:#000; - Cor de fundo, para mudar altere a parte #000 para qualquer cor hexadecimal ou rgb que você querer!
color:#fff; - Cor da fonte para mudar altere a parte #fff para qualquer cor hexadecimal ou rgb que você querer!
Exemplo como ficou a nossa div:
Duvidas? Sugestões? Erro de português? comente logo ali em baixo!
Se o seu arquivo for .html você devera colocar o CSS entre as tag <head></head> ficando assim:
Se o seu arquivo é .css que é recomendado:
#bordasarredondadas{
-webkit-border-radius: 20px;
border-radius: 20px;
background:#000;
color:#fff;
}
<style></style> - é para o navegador identificar que tudo que estiver escrito entre esta tag é CSS fora dela não vai funcionar
#bordasarrendondadas - Este é ID da div que vai identificar a mesma.
-webkit-border-radius: 20px; - este serve para os internet explorer mais antigo intender que o elemento vai ficar com a bordas arredondadas 20px. Sem ele no internet explorer 7,8 não vai funcionar
border-radius: 20px; - Você pode mudar o arredondamento da borda para quantos pixel você quiser alterando o 20px quanto mais pixels mais redonda ela fica e quanto menos mais quadrada.
background:#000; - Cor de fundo, para mudar altere a parte #000 para qualquer cor hexadecimal ou rgb que você querer!
color:#fff; - Cor da fonte para mudar altere a parte #fff para qualquer cor hexadecimal ou rgb que você querer!
Exemplo como ficou a nossa div:
Postar um comentário Facebook Blogger