Quinta, 25 de Abril de 2024

©2024 CJDinfo®

Detalhe Solução

HTML: Formatar um elemento html com bordas arredondadas:

Código exemplo:

<!DOCTYPE html>
<html>
<style>
.borda_redonda{
border: 1px solid #333333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
</style>
<div class=borda_redonda>
Elemento com borda redonda
</div>
</html>

Obs.:

através do elemento de estilo border define-se como será a borda. No caso, contínua com 1 píxel de largura na cor #333333 (grafite);
através dos 3 elementos de estilo border-radius seguintes define-se que será uma borda de 8 píxels de raio nos 4 cantos;
Pode-se definir cada canto separadamente com 4 valores seguidos, como 8px 8px 8px 8px, sendo respectivamente os raios dos cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo. Use a mesma definição para os 3 comandos border-radius;
Pode funcionar para outros elementos além do <div>, como o <td>;
Para funcionar no Internet Explorer é necessário ter a tag <!DOCTYPE html> no início da página, antes da tag <html>.

¤ Links Relacionados:
- Veja todas as soluções do site

Retornar