Bordure sur image

Quand vous placer une image vous obtenez ceci

Pour placer une bordure...colorée

Cliquer sur Editeur HTML

 et copier ce code

<img src="http://img38.imageshack.us/img38/3603/1000426b.jpg" alt="" width="500" height="281" style="
border-color: #ff0000 #0000ff;
border-style: solid;
border-width: 10px;
">

 

border-color: #ff0000 #0000ff; Couleurs des bords (ici deux couleurs mais on peut n'en placer qu'une seule)
border-style: solid; le style solid ou dashed (pointillé)
border-width: 10px; et enfin l'épaisseur du trait

A ceci nous pourrions ajouter

border-top-left-radius:10%; ou border-radius:25px; ce qui donnerait un angle arrondi



Pour placer une image autour d'une photo par exemple

<img style="border-width: 15px; border-image: url('http://img96.imageshack.us/img96/6748/borderm.png') 30 30 stretch;" src="http://img38.imageshack.us/img38/3603/1000426b.jpg" alt="" width="500" height="281" />

 La même avec une bordure bleu

<img style="border-width: 15px; border-image: url('http://img801.imageshack.us/img801/4144/borderblue.png') 30 30 stretch;" src="http://img38.imageshack.us/img38/3603/1000426b.jpg" alt="" width="500" height="281" />

 

 Explication :

border-width: 15px; veux dire que la bordure fait 15px

border-image: url('http://img801.imageshack.us/img801/4144/borderblue.png') 30 30 stretch;" L'image utilisée pour faire la bordure 

src="http://img38.imageshack.us/img38/3603/1000426b.jpg" alt="" width="500" height="281" /> et enfin l'adresse ou est hébergée l'image encadrée 

Aucune note. Soyez le premier à attribuer une note !