Coins arrondis : exemple 1

posted in: css | 0

La propriété border-radius property permet d’arrondir les coins d’un élément.

Rounded corners pour un élément avec un background color précis:

Rounded corners!

Rounded corners pour un élément avec une bordure:

Rounded corners!

Rounded corners pour un élément avec une background image:

Rounded corners!logo école

Le code expliqué

<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 300px;
height: 250px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 300px;
height: 250px;
}
#rcorners3 {
border-radius: 25px;
border: 2px solid #8AC007;
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 300px;
height: 280px;
}
</style>
<p>La propriété border-radius property permet d’arrondir les coins d’un élément.</p>
<p>Rounded corners pour un élément avec un background color précis:</p>
<p id= »rcorners1″>Rounded corners!</p>
<p>Rounded corners pour un élément avec une bordure:</p>
<p id= »rcorners2″>Rounded corners!<

<p>Rounded corners pour un élément avec une background image:</p>
<p id= »rcorners3″>Rounded corners!<img src= »http://lescarnetsd.entara.be/wp-content/uploads/2015/02/logo-école.jpg » alt= »logo école » width= »225″ height= »224″ class= »alignnone size-full wp-image-42″ /></p>

logowebmaster1