Discussion :

[logiclogic]

Bonjour,


Est-il possible d'avoir une bordure de bloc en forme de cercle ? Il y a border-radius, mais ce n'est qu'un arrondi des angles. Je cherche le code CSS pour avoir un cercle comme bloc.
Merci...

[rodolphebrd]

Bonjour,

effectivement il y a border-raduis avec pour valeur 50%...

[Bovino]

Si tu mets une bordure, il faut prévoir plus que 50% afin de prendre en compte l'arrondi de la bordure.

Il y a border-radius, mais ce n'est qu'un arrondi des angles.

Euh... je comprends pas trop...
Vu que ça fait précisément ce que tu souhaites, ça ne te convient pas ?

[rodolphebrd]

Si tu mets une bordure, il faut prévoir plus que 50%

Comment ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#circle { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red;
  border-radius: 50%; 
}

http://codepen.io/anon/pen/rDvFy

[Bovino]

Arf... tu as raison.
Il me semblait me souvenir que border-radius: 50% ne prenait justement pas en compte la bordure elle-même (comme c'est le cas si tu utilises des px).

ATPM.

[rodolphebrd]

Ta remarque m'a fait un peu cherché...
dans cet exemple border-radius peut prendre comme valeurs 50% et 50px avec une bordure de 1px

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#circle { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red;
  border-radius: 50px; /*ou 50%*/
}

Dans le cas d'une bordure épaisse (ici 10px) il faudra augmenter la valeur de border-raduis. Sachant que 50% fonctionne toujours.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#circle { 
  width: 100px; 
  height: 100px; 
  border: 10px solid red;
  border-radius: 60px; /*ou 50%*/
}

Lorsque les dimensions de l'élément changent il faut recalculer le border-radius en pixel alors que la valeur 50% fonctionne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#circle { 
  width: 200px; 
  height: 200px; 
  border: 10px solid red;
  border-radius: 110px; /* border-radius: 50%; */
 }