Border-radius et width

Bonjour,

lorsqu'on applique une bordure sur un bloc la taille utilisable de celui-ci diminue d'autant.
Ainsi si au départ je dispose d'un bloc de 320px et que j'applique une bordure de 8px, mon "width" ne fera plus que 304px.

Je voulais utilsais :

   -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
		 border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
			 box-shadow: 0 1px 3px rgba(0,0,0,.4);

Est-ce je dois appliquer le même calcul pour la dimension du width?

Merci
Modifié par cpalo (08 Sep 2013 - 10:53)

salut,
tu as ce comportement lorsque le modèle de boîte CSS n'est pas par défaut. En CSS il existe une propriété qu'est "box-sizing" qui te permet de déterminer la façon dont seront calculées les largeurs/bordures/marges.
Si tu veux que tes bordures et marges (padding) s'appliquent à l'extérieur (i.e s'ajoutent au "width" que tu as spécifié), la propriété "box-sizing" doit prendre la valeur "content-box" (qui est au passage la valeur par défaut). Si au contraire tu veux que tes bordures et marges s'appliquent à l'intérieur du "width" indiqué, la propriété "box-sizing" doit prendre la valeur "border-box".
Dans ton cas, pour avoir donc un comportement par défaut, tu n'as qu'à ajouter

-moz-box-sizing: content-box;
box-sizing: content-box;