css image border-radius

**AndroChristophe** · 27/06/2012, 10h50

Bonjour,
Je rencontre une difficulté avec le css et certaines images.
En fait je voudrais arrondir le bord de mes images. Cela fonctionne bien avec la balise <img> mais pas avec la balise <input type="image"/> sous ie9. Les versions antérieures ne m'intéressent pas pour ce projet. Bien entendu mon code fonctionne sous Firefox et Chrome.

Voici mon code simplifié :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="page">
	<div class="image">
		<img src="./bbb.jpg"/>
	</div>
	<div class="image">
		<form action="video.php" method="post">
			<input type="hidden" name="video" value="ma_val" />
			<input type="image" src="./bbb.jpg" alt="photo input" />
		</form>
	</div>
</div>

et le css associé très simple également

Code :

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

1
2
3
4
img, input[type=image]{
	border-radius: 15px;
	box-shadow: 0 1px 5px #000000;
}

Si quelqu'un a une solution pour que les inputs image puissent s'afficher avec un contour arrondir, merci de m'en faire part

**mcoutant** · 27/06/2012, 11h44

Salut AndroChristophe,

Aucun problème de mon coté, peut être devrait tu regarder du coté de "mode de compatibilité"

Sinon essaye de mettre ceci

Code html :

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

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

**AndroChristophe** · 27/06/2012, 12h40

Merci pour ta réponse rapide mais de mon coté ça ne marche pas. Pourtant j'ai laissé que l'essentiel pour ce test. Je ne connaissais pas le "mode de compatibilité"

Voici mon code maintenant et une image pour vous montrer. En fait j'ai l'impression que l'arrondi se fait bien car l'ombre derrière est arrondi, mais que l'image est collé par dessus et du coup n'applique pas le style.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>...</title>
 
		<style>
			img, input[type=image]{
				border-radius: 15px;
				box-shadow: 0 1px 5px 3px #000000;
				margin: 10px;
			}
		</style>
	</head>
 
	<body>
		<div id="page">
			<div class="image" style="float:left;">
				<img src="./bbb.jpg"/>
			</div>
			<div class="image">
				<form action="video.php" method="post">
					<input type="hidden" name="video" value="ma_val" />
					<input type="image" src="./bbb.jpg" alt="photo input" />
				</form>
			</div>
		</div>	
	</body>
</html>

Désolé je débute en css, j'espère ne pas avoir oublié un truc évident.

**mcoutant** · 27/06/2012, 13h32

Bon bah je suis vraiment désolé pour toi, mais sur ce coup la je ne peux t'aider c'est IE qui interprète mal et donc je vois pas comment faire si quelqu'un d'autre à la solution je serais ravis de la découvrir ^^

css image border-radius

CSS

Discussions similaires

Partager

Partager