Comment faire une ellipse en CSS et HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-03-01 12:58:08

Question

Comment faire une ellipse en CSS et HTML, puis y centrer du texte ?

Réponse

Pour faire une ellipse en CSS et HTML , vous pouvez utiliser la propriété CSS border-radius, et pour aligner le texte, les propriétés text-align, display, et vertical-align.

Exemple pour faire une ellipse de 200 par 300 pixels, en CSS et HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment faire une ellipse en CSS et HTML ?</title>
<style>
.ellipse {
height: 200px;
width: 300px;
background-color: gray;
border-radius: 50%;
}
.centrer-texte {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="ellipse centrer-texte">texte centré dans l'ellipse</div>
</body>
</html>

Démo via le Bac à codes.