Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 75.162 ]

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

Renomeie vários arquivos com o Thunar

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

BrasilLinux DosVox - Linux para deficientes visuais

O mundo dominado por nerds!

Leitura recomendada

Comandos para o dia-a-dia

Como saber se um programa esta instalado no Debian

Servidor DHCP no Fedora

Como abrir arquivos .swp

Um erro de programação pode matar?

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

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

Manutenção de sistemas Linux Debian e derivados com apt-get, apt, aptitude e dpkg

Criatividade para TI parte 1

Melhorando o tempo de boot do Fedora e outras distribuições

Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46

Dicas

Como Atualizar Fedora 39 para 40

Instalar Google Chrome no Debian e derivados

Consertando o erro do Sushi e Wayland no Opensuse Leap 15

Instalar a última versão do PostgreSQL no Lunix mantendo atualizado

Flathub na sua distribuição Linux e comandos básicos de gerenciamento

Tópicos

Reset do linux sem perder dual boot (2)

Lançado Ubuntu 24.04 Final (6)

redirecionando saida de comando touch para o AWK[AJUDA] (1)

iso de sistema 32 bit em atividade (14)

Linux kernel.lockdown (1)

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: