border-radius : Safari 3 et + , Chrome 3 et + , FireFox 1 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +
- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
- 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
- <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
- <head>
- <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
-
-
- <!-- Style CSS -->
- <link rel='stylesheet' type='text/css' href='Coins arrondis CSS.css' />
-
-
-
- </head>
- <body>
-
-
-
-
-
- <!-- Javascript -->
-
- </body>
- </html>
- #arrondi_css_1 , #arrondi_css_2{
- float:left;
- margin:0 1% 20px 1%;
- width:48%;
- background-color:#aaa;
- text-align:center;
- }
-
- #arrondi_css_1{
- /*
- Conseil : pour la lisibilité et la maintenance du site, organiser les propriétés CSS
- utilisant une sandbox de façon décroissante (Merci éric)
- */
- -webkit-border-radius:10px;
- -khtml-border-radius:10px;
- -moz-border-radius:10px;
- -ms-border-radius:10px;
- -o-border-radius:10px;
- border-radius:10px;
-
- /* Complément pour Internet Explorer, à télécharger sur http://css3pie.com/ */
- behavior:url(/PIE/PIE.htc);
- }
-
- #arrondi_css_2{
- /*
- Les valeurs sont dans l'ordre suivant :
- Haut-Gauche , Haut-Droit , Bas-Droit , Bas-Gauche
- */
- /* coins arrondis pour Chrome, Safari, Android */
- -webkit-border-radius:10px 10px 0 0;
- /* coins arrondis pour Konqueror */
- -khtml-border-radius:10px 10px 0 0;
- /* coins arrondis pour Firefox et Mozilla */
- -moz-border-radius:10px 10px 0 0;
- /* coins arrondis pour Internet Explorer */
- -ms-border-radius:10px 10px 0 0;
- /* coins arrondis pour Opera */
- -o-border-radius:10px 10px 0 0;
- /* coins arrondis par défaut */
- border-radius:10px 10px 0 0;
- /* PIE */
- behavior:url(/PIE/PIE.htc);
- }