CSS-Border-Radius-Generator
Vorschau des Rahmenradius
CSS-Code
.element {
border-radius: 20px;
}
? Häufig gestellte Fragen
Wie funktioniert border-radius?
Mit `border-radius` werden die Ecken eines Elements abgerundet. Die Werte können in Pixeln, Prozent oder em angegeben werden. Sie können alle Ecken gleichzeitig festlegen (`border-radius: 10px`) oder jede Ecke einzeln (oben links, oben rechts, unten rechts, unten links).
Kann ich elliptisch abgerundete Ecken erstellen?
Ja! Verwenden Sie zwei durch einen Schrägstrich getrennte Werte: border-radius: 50px / 25px. Der erste Wert ist der horizontale Radius, der zweite der vertikale, wodurch elliptische statt kreisförmige Kurven entstehen.
Wie zeichne ich einen perfekten Kreis?
Setzen Sie `border-radius: 50%` für ein quadratisches Element. Der Prozentsatz bezieht sich auf die Abmessungen des Elements; 50 % bei einem Quadrat erzeugen also einen Kreis. Verwenden Sie für Rechtecke stattdessen einen größeren Pixelwert.
Können die einzelnen Ecken unterschiedliche Radiuswerte aufweisen?
Absolut! Sie können für jede Ecke unterschiedliche Werte angeben: border-radius: 10px 20px 30px 40px (oben links, oben rechts, unten rechts, unten links) oder einzelne Eigenschaften wie border-top-left-radius verwenden.
Funktioniert es mit Rahmen und Innenabstand?
Ja, `border-radius` interagiert mit Rahmen und Innenabstand. Der äußere Rand folgt dem Rahmen, während der innere Rand den Innenabstand berücksichtigt. Die visuelle Vorschau veranschaulicht das Zusammenspiel dieser Eigenschaften.
Sind meine Daten sicher?
Ja, absolut! Dieses Tool läuft vollständig in Ihrem Browser. Die gesamte Datenverarbeitung findet lokal auf Ihrem Gerät statt – es werden keine Daten auf unsere Server hochgeladen. Ihre Dateien und Daten verlassen Ihren Computer niemals, wodurch absolute Privatsphäre und Sicherheit gewährleistet sind.