Discussion :

[many84]

Bonsoir,
j'aimerais avoir une bordure image
Pouvez-vous m'aider s'il vous plaît ?
Je suis sur wordpress

[Muchos]

Vous pouvez (si le navigateur le supporte) utiliser une propriété CSS appelée border-image.
Voici un exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div {
  border-image:
    url(/lien/vers/mon_image.png)
    30 /* hauteur (px) */
    30 /* largeur */
    repeat /* rendu du milieu des bordures horizontales */
    /* repeat */ /* bordures verticales (inutile si même valeur que précédente) */
;
}

[Invité]

Bonjour,
voici comment obtenir une double bordure blanc/rose autour de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
img {
  padding:8px; background:#fff;  /* blanc */
  border:10px solid #fde7e7; /* rose */
}

Si tu veux vraiment que les bordures n'aient pas la même épaisseur :
(comme sur l'image fournie)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
img {
  padding:8px 17px; background:#fff; /* blanc */
  border:10px solid #fde7e7; /* rose */
  border-top:14px solid #fde7e7;
  border-bottom:14px solid #fde7e7;
}

N.B. Pour info, une balise img s'écrit avec un attribut alt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="..." alt="" />

• alt permet de mettre un texte alternatif

on peut aussi ajouter un attribut title="..." pour l'accessibilité (mal-voyant) sur les boutons-images (comme sur ton site).

[many84]

Bonjour,
Merci infiniment, mais même avec le code image j'ai du mal car en gros, je cherche à mettre une image pour le haut et le bas, et une autre pour les côtés.


Ce code c'est celui que j'ai pour les bordures de couleurs.

Merci pour tout

[Invité]

Bonjour,
quel intérêt de mettre 4 images, là une une seule suffit ???

Même avec une image texturée, une image carrée 10x10px ou 20x20px devrait être suffisante (avec un "repeat") :

D'autant plus que le code que j'ai proposé donne un résultat très similaire, avec simplement une couleur (sans texture).
As-tu au moins eu la curiosité de tester ?

[many84]

Oui bien sur j'ai testé, il y a une option de prévisualisation
Pour l'image je ne savais pas merci.

[Invité]

avec une image carrée 14x14px (par exemple) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
img {
  position:relative; 
  padding:8px 17px; background:#fff; /* blanc */
  border-width:10px 15px; border-style:solid;
  border-image: url(http://www.developpez.net/forums/attachments/p180869d1434551625/webmasters-developpement-web/mise-page-css/bordure-image/imgbg.png) 20% round;
}

=> image ici :

[many84]

Waouh super ! Merci mille fois !