Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.372 ]

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

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Efeitos de fogo no Linux

Instalando e configurando GeForce 6200 AGP no Linux

Leitura recomendada

openSUSE Leap 42.1 - 6 dicas de pós-instalação

Instalando placa wireless 3DSP no Ubuntu 9.10

Instalando o PostgreSQL no GNU/Linux

Usando aMSN com plugin MUSIC com suporte ao JUK

DPKG - Resolvendo problemas de instalação de pacotes

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Gentoo binário em 2026: UEFI, LUKS, Btrfs e Systemd

Trabalhando Nativamente com Logs no Linux

Jogando Daikatana (Steam) com Patch 1.3 via Luxtorpeda no Linux

LazyDocker – Interface de Usuário em Tempo Real para o Docker

Instalando COSMIC no Linux Mint

Dicas

Gentoo: eix

Gentoo: equery + flaggie

Por que sua empresa precisa de uma PKI (e como automatizar EMISSÕES de certificados via Web API)

Instalando NoMachine no Gentoo com Systemd (acesso Remoto em LAN)

Gentoo: Trocando wpa_supplicant pelo iwd no NetworkManager (Systemd)

Tópicos

Necessário autenticar ao imprimir - Ubuntu X Windowns (0)

O que houve com slackware ??? (10)

O Free Download Manager não abre no Fedora 43 KDE Plasma (2)

Permissão acesso as pastas servidor Ubuntu Server 24.04 (5)

Quando vocês pararam de testar distros? (22)

Top 10 do mês

Scripts

[Shell Script] Flatpak manager

[Outros] Script de limpeza, atualização e verificação de erros no Debian - v7

[Shell Script] Telegram direto do site

[Python] Redes Neurais

[Java] Calculadora com Opções em Java

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: