Was ist der CSS-Konturradius?
Der CSS-Konturradius beschreibt visuell abgerundete Ecken an der Kontur eines Elements. CSS bietet keine breit unterstützte eigenständige Eigenschaft outline-radius. Daher folgt die gerenderte Form meist dem Rahmenradius des Elements.
So funktioniert der CSS-Konturradius
Eine Kontur wird um ein Element gezeichnet, ohne dessen Boxabmessungen zu beeinflussen. Damit eignet sie sich als Fokusindikator, ohne Layoutverschiebungen zu verursachen. Abgerundete Bedienelemente erschweren diese Geometrie, weil die Kontur außerhalb der Rahmenkante liegt und ihre Krümmung vom Browser gerendert wird. In aktuellem CSS werden outline, outline-offset und border-radius kombiniert; eine standardisierte Eigenschaft outline-radius zur separaten Anpassung gibt es nicht. Dies gehört zur Gestaltung von Interaktionszuständen und erfordert visuelle Tests in verschiedenen Browsern.
Wichtige Fakten
- Anders als ein Rahmen reserviert eine Kontur keinen Platz und kann von einer Rechteckform abweichen. Ihre genaue Darstellung um fragmentierte oder abgerundete Boxen ist kein Ersatz für die Layoutgeometrie.
- outline-offset verschiebt die Kontur von der Rahmenkante weg oder auf sie zu, definiert aber nicht die Eckenkrümmung. Daher lässt sich damit nicht unabhängig ein anderer Konturradius festlegen.
- Wird die standardmäßige Fokuskontur ohne gleich gut sichtbaren Ersatz entfernt, geht die Orientierung bei der Tastaturbedienung verloren. Prüfen Sie bei jedem Radius der Bedienelemente und jeder Zoomstufe auf abgeschnittene Konturen und zu geringen Kontrast.
Wann der CSS-Konturradius relevant ist
Prüfen Sie die Konturdarstellung, wenn Sie Tastaturfokusindikatoren für abgerundete Schaltflächen und Bedienelemente gestalten. Ein Browser kann eine Kontur anders zeichnen als den Rahmen. Testen Sie daher die Sichtbarkeit, statt identische Kurven vorauszusetzen.