Bonjour,
Actuellement j'ai ce code :

Code:

.postdetails.poster-profile a img {
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topright:2px;
border: 2px solid #1A141F;
}

et ça me donne :


Or je voudrai cet effet, style photo qui sort d'un Polaroid


Pouvez vous me dire comment je dois modifier mon code pour avoir ça s'il vous plait. ?

Merci

Bonjour,

Donc il faut donner une plus grosse valeur à la bordure du dessous:

Code:

border: 2px solid #1A141F;
border-bottom: 10px solid #1A141F;

Par exemple.

Vous pouvez également changer la valeur des arrondis dans votre code... o_o *simplifie le code un peu xD*

Code:

.postdetails.poster-profile a img {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 2px solid #1A141F;
border-bottom: 10px solid #1A141F;
}

Dans le fond, le code veut dire que les 4 coins auront des arrondis de 2 px sur Mozilla Firefox, sur les navigateurs de Webkit (Safari, Google Chrome...) et les autres navigateurs avec des arrondis (Opera, IE 9 plus tard). +, il y a la bordure de 2px autour de l'avatar avec une bordure en dessous de 10px.

Ok merci beaucoup!
Donc quand je vois ''moz-..." je peux ajouter ''webkit-..'' en dessous pour que sa marche sur tout les navigateur ? Ou c'est juste dans ce cas la ?

C'est pour tous les arrondis~

Donc pour Firefox c'est -moz, pour Safari/Chrome c'est -webkit et les autres c'Est juste border-radius. Comme ça, tous les navigateurs (sauf IE8 et les plus vieux, ils sont cons mdr) vont pouvoir voir les arrondis :DD

Ok, merci beaucoup