Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 75.187 ]

3 0

 

Denuncie   Favoritos   Indicar   Impressora

Borda nas imagens usando CSS e HTML



É muito simples colocar bordas nas suas imagens usando CSS e HTML, eu já visualizei muitas imagens na net que eles editam a imagem para poder colocar a borda, na minha opinião é mais prático e fácil com código.

1. Coloque o seguinte código no seu CSS:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}

2. No seu HTML coloque:

Para imagem centralizada:

<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>

Para imagem alinhada à esquerda:

<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>

Para imagem alinhada à direita:

<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>

Para imagem sem alinhamento:

<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>

3. Às vezes, para que a borda funcione corretamente no Internet Explorer, você tem que substituir o <html> e o <head> por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

Configurando a seu gosto:

.alignnone{
margin: 1px 4px 0 0;
padding: 3px; /* Aqui Você pode aumentar ou diminuir o tamanho da borda pode colocar 3px, 5px, 6px etc */
background-color: #ffffff; /* Aqui você pode trocar a cor */
border: 1px solid #dbdbdb;
}

Um exemplo:

<img src="http://rhodya.99k.org/vox.jpg" class="alignnone" alt="" width="200" height="150" />

Sem borda:
Com borda:
Fácil, fácil, não?!?!?

Outras dicas deste autor

BrasilLinux DosVox - Linux para deficientes visuais

Efeitos de fogo no Linux

Instalando e configurando GeForce 6200 AGP no Linux

Renomeie vários arquivos com o Thunar

O mundo dominado por nerds!

Leitura recomendada

Woody, Sarge e Sid - um breve introdução às versões do Debian

Como remover o ambiente gráfico instalado no Ubuntu

Sugestões para iniciar no Linux

Pequena pós-instalação Fedora 39

Replicação de Banco de Dados MySQL com Percona XtraDB

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop

Aprenda a criar músicas com Inteligência Artificial usando Suno AI

Entendendo o que é URI, URL, URN e conhecendo as diferenças entre POST e GET

Ativando o Modo Noturno via Linha de Comando no GNOME/Wayland

Instalar certificado digital Safesign, fornecido pela Certisign e utilizado pela OAB-SP, em qualquer distribuição Linux usando distrobox

Dicas

Habilitando a importação de senhas no Firefox

Como corrigir o erro do VirtualBox travar a máquina virtual em tela cheia

Instalando Google Chrome no Ubuntu 24.04 LTS

Quantidade de caracteres suportados na barra de endereços dos navegadores

Instalando o Firefox via pacote .deb no Ubuntu 24.04 LTS

Tópicos

Reconfigurar o Ubuntu 22.04 LTS (4)

Problemas com o Lutris e o Wine no Slackware 15.0 (3)

Altera pacote .pkg.tar do Arch Linux (16)

Segunda tela não dá vídeo mas reconhece o monitor no painel (3)

Emular android (6)

Top 10 do mês

Scripts

[Python] Adicione a opção Redimensionar e rotacionar imagens ao Nautilus

[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse

[Shell Script] Script para criar certificados de forma automatizada no OpenVpn

[Shell Script] Conversor de vídeo com opção de legenda

[C/C++] BRT - Bulk Renaming Tool

A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.

Site hospedado por: