Bild mit rundem Rahmen in HTML

Question

Wie kann ich ein Bild in HTML mit einem runden Rahmen machen? Also so das man nur einen runden Ausschnitt vom Bild sieht?

Answer 1

Du kannst dem Bild einen border-radius von 50% geben, damit erhältst du einen Kreis. Hier ist ein Beispiel.

.rundes-bild {
      width: 200px;           
      height: 200px;          
      object-fit: cover;      /* Bild zuschneiden und füllen */
      border-radius: 50%;     /* Rund machen */
      overflow: hidden;       /* Alles außerhalb beschneiden */
      border: 4px solid #333; /* Optional: Rahmen */
}