NetPlusMédia

Créer des coins arrondis en CSS

Retour

Compatibilités


border-radius : Safari 3 et + , Chrome 3 et + , FireFox 1 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +

Coins arrondis.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Cr&eacute;er des coins arrondis en CSS</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='Coins arrondis CSS.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div id="arrondi_css_1">Arrondi en CSS n&deg;1</div>
  17.  
  18. <div id="arrondi_css_2">Arrondi en CSS n&deg;2</div>
  19.  
  20.  
  21. <!-- Javascript -->
  22.  
  23. </body>
  24. </html>

Coins arrondis CSS.css

  1. #arrondi_css_1 , #arrondi_css_2{
  2. float:left;
  3. margin:0 1% 20px 1%;
  4. width:48%;
  5. background-color:#aaa;
  6. text-align:center;
  7. }
  8.  
  9. #arrondi_css_1{
  10. /*
  11.   Conseil : pour la lisibilit et la maintenance du site, organiser les proprits CSS
  12.   utilisant une sandbox de faon dcroissante (Merci ric)
  13.   */
  14. -webkit-border-radius:10px;
  15. -khtml-border-radius:10px;
  16. -moz-border-radius:10px;
  17. -ms-border-radius:10px;
  18. -o-border-radius:10px;
  19. border-radius:10px;
  20.  
  21. /* Complment pour Internet Explorer, tlcharger sur http://css3pie.com/ */
  22. behavior:url(/PIE/PIE.htc);
  23. }
  24.  
  25. #arrondi_css_2{
  26. /*
  27.   Les valeurs sont dans l'ordre suivant :
  28.   Haut-Gauche , Haut-Droit , Bas-Droit , Bas-Gauche
  29.   */
  30. /* coins arrondis pour Chrome, Safari, Android */
  31. -webkit-border-radius:10px 10px 0 0;
  32. /* coins arrondis pour Konqueror */
  33. -khtml-border-radius:10px 10px 0 0;
  34. /* coins arrondis pour Firefox et Mozilla */
  35. -moz-border-radius:10px 10px 0 0;
  36. /* coins arrondis pour Internet Explorer */
  37. -ms-border-radius:10px 10px 0 0;
  38. /* coins arrondis pour Opera */
  39. -o-border-radius:10px 10px 0 0;
  40. /* coins arrondis par dfaut */
  41. border-radius:10px 10px 0 0;
  42. /* PIE */
  43. behavior:url(/PIE/PIE.htc);
  44. }

Démonstration

Créer des coins arrondis en CSS
Arrondi en CSS n°1
Arrondi en CSS n°2

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter