le MEMO du WEB développeur
 

••• Trucs en CSS3 •••   Liste des Mémos, astuces et bonnes pratiques

Foncer une image au passage de la souris - CSS
Effet carnet de notes en CSS 3 - empilement de feuilles - CSS
Un joli titre sans image, tout en CSS - CSS
Effet ruban sur un titre en CSS 3 - CSS
Dessiner un cercle sans image grâce à CSS 3 - CSS
Une bordure en pointillés en CSS3 - Effet couture. - CSS
Un effet de changement de couleur fluide en CSS3 - CSS
Colorer une ligne sur 2 dans un tableau en CSS3 - CSS
Les transitions en CSS3 : rotation d'un élément - rotate() - CSS
Dessiner un triangle avec CSS3 - CSS
Ombrage - propriété box-shadow - CSS

Arrondir les bords d'un élément - CSS

Arrondir les bords d'un DIV en CSS, c'est maintenant un jeu d'enfant grâce à la propriété border-radius.

Petite exception sous IE>9 qui aura besoin d'un plugin externe : roundies

http://www.dillerdesign.com/experiment/DD_roundies/

Donc sous IE < 9 télécharger le script roundies.js et le déclarer dans son entête

<!--[if lte IE 8]>
 <script type="text/javascript" src="../../scripts/roundies.js"> </script>
 <script  type="text/javascript">
  DD_roundies.addRule('.monblocarrondi', '10px 10px 10px 10px ');
</script>
 <![endif]-->

Pour les autres navigateurs,  3 lignes dans la feuille de style suffisent pour arrondir les bords de mes éléments de classe .monblocarrondi  :

.monblocarrondi{
   border-radius: 3px; /* sert pour les dernières version des navigateurs à partir de IE 9*/
   -moz-border-radius: 3px; /* sert pour les anciennes versions de Mozilla */
   -webkit-border-radius: 3px;
}

A noter, la possibilité de personnaliser la courbure de chaque bord : border-radius: 10px 20px 30px 40px 10px :haut gauche - 20px: haut droit - 30px bas droit - 40px bas gauche. on part du haut gauche dans le sens des aiguilles d'une montre.

 

publié le 07/12/2011 par Memo Web
CSS3
Commenter le Mémo :

Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos