Les bordures en CSS3

Premier exemple de bordure de couleur noire arrondie avec un arri�re plan de couleur choisie

dans le code HTML

<section>
<div class="mlt_bordure">Elle n'est pas bell ma bordure</div>
</section>

dans le CSS

.mlt_bordure {
background-color: #ffffff;
/* Le code magique pour tous les navigateurs SAUF Internet Explorer */
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
/* On définit ici l'épaisseur, l'aspect et la couleur de notre bordure */
border: 2px solid #80a6af;
/* du padding pour écarter notre texte des bords de notre div */
padding: 10px;
}

---

Cequi donne dans le navigateur:

---

Second exemple de bordure arrondie sans arrière plan

dans le code HTML

<section>
<div class="comment"> cette bordure est arrondie aussi mais n'a pas de couleur d'arrière plan</div>
</section>

dans le CSS

.comment2{
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 100px;
}

---

Cequi donne dans le navigateur:

Ceci est un Exemple de bordure arrondie en CSS

cette bordure est arrondie aussi mais n'a pas de couleur d'arrière plan

---

---

Troisième exemple de bordure arrondie avec en arrière plan une image

dans le code HTML

<section>
<div class="comment"> cette bordure est arrondie et a une image en arrière plan</div>
</section>

dans le CSS

.comment3{
border-radius: 25px;
background:url(http://ll.univ-poitiers.fr/llappli//wikiL3_2017/upload_dir/BaBel/arp1.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
color:white;
}

---

Cequi donne dans le navigateur:

Ceci est un Exemple de bordure arrondie en CSS

cette bordure est arrondie avec une image en arrière plan

---

Avec une ombre animée

dans le code HTML

<section>
<div class="comment4">Une jolie bordure avec une ombre qui s'anime progressivement</div>
</section>

dans le CSS

.comment4{
width: 200px;
height: 100px;
border-radius: 25px;
background: url(http://wiki.belhamissi.com/zGigz/arp2.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}

L'ombre de la boite évolue graduellement:

Une jolie bordure avec une ombre qui s'anime progressivement

La propriété box-shadow est animatable en CSS.

Note: les Animations CSS ne fonctionnent pas avec Internet Explorer 9 les précédente versions versions.

Retour

---