CSS-Border-Radius-Generator
Einen border-radius-Wert einfügen, Ecken visuell anpassen und CSS oder Tailwind kopieren. Elliptische Slash-Syntax ist verfügbar. Im Browser erzeugt — nie gesendet.
Hinweise für Entwickler
• Die Ausgabe folgt der CSS-Kurzform: 1–4 Token pro Seite, Slash-Syntax nur wenn der horizontale Radius einer Ecke vom vertikalen abweicht. • Tailwind-Export mappt einen einheitlichen px-Radius auf die v4-Skala (2–32px plus none/full) mit ±1px; sonst rounded-[…] mit Unterstrichen für Leerzeichen. • Pill-Presets nutzen 9999px (rounded-full), nicht 50 %. 50 % ist nur auf einer quadratischen Vorschau ein Kreis. • Vorschaubreite/-höhe sind UI-Zustand in der URL, keine exposed options, und ändern den exportierten Radius-String bei px nicht.
Optionen
- Ecken koppeln — Ein: das Ändern einer Ecke aktualisiert alle vier — der übliche Card-/Button-Workflow. Aus: unabhängige Radien oben links, oben rechts, unten rechts, unten links.
- Einheit — Suffix für jede Ecke und den exportierten String: px (absolut) oder % (relativ zu den Elementmaßen). Circle-Presets nutzen %; Card und Pill nutzen px.
- Elliptisch — Aus: ein Radius pro Ecke (max. 4 Werte). Ein: horizontaler plus vertikaler Radius pro Ecke, 8-Werte-Slash-Syntax sobald ein Paar abweicht.
- Exportformat — Zwischenablage: CSS-border-radius-Deklaration, Custom Property --radius, nächste Tailwind-Klasse rounded-* (Fallback rounded-[…]) oder Bootstrap-5-Utility rounded-* (Fallback Inline-Style).
Verwandte CSS-Werkzeuge
Hub: Farb- & CSS-Werkzeuge. Farben mit dem Farbkonverter umwandeln, Ton-Skalen mit dem Farbabstufungen-Generator erzeugen oder Stylesheets mit CSS minifizieren und CSS formatieren verkleinern.
FAQ zum CSS-Border-Radius-Generator
Lokaler Editor für abgerundete Ecken
Kann ich einen vorhandenen border-radius aus den DevTools einfügen?
Ja. Fügen Sie 1–4 Längen, optionale 8-Werte-Slash-Syntax oder eine vollständige border-radius: …;-Deklaration ein. Ungültige Eingaben zeigen einen Fehler und behalten die letzte gültige Vorschau.
Was macht der elliptische Modus?
Er schaltet pro Ecke einen horizontalen und einen vertikalen Radius frei. Sobald ein Paar abweicht, nutzt die CSS-Ausgabe die Slash-Syntax (a b c d / e f g h).
Wie wählt der Tailwind-Export eine Klasse?
Ein einheitlicher Pixel-Radius innerhalb von ±1px der Tailwind-v4-Skala wird zu rounded-none, rounded-xs … rounded-4xl oder rounded-full. Alles andere, inklusive %, Slash und gemischter Ecken, wird zu rounded-[…].
Wird mein CSS irgendwohin gesendet?
Nein. Parsing und Zusammenbau laufen vollständig im Browser. FastMinify sendet den eingefügten Wert nie an einen Server.
Farb- & CSS-Tools
Lokal eingefügte WCAG-Kontrastprüfung mit moderner CSS-Farbsyntax — Paar- und Matrixansicht, nie hochgeladen.
Weitere Werkzeugkategorien entdecken
Minimieren
Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.
Aufheben
Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.
Konvertierung
Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.
Codierung
Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.
Serialisierung
Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.
JSON Werkzeuge
Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.
SVG Werkzeuge
Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.
Verschönern
Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.
CSS-Präprozessoren
Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.
DevOps und Infrastruktur
Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.
CI/CD
GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.
Protokolle und Beobachtbarkeit
Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.
Kubernetes
Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.
Netzwerk / IP
CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.
Sicherheit und Token
JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.
API & Schemata
OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.
HTTP-Tools
cURL, HTTP-Nachrichten, URLs, HAR und Cookie/Set-Cookie lokal einfügen — formatieren und prüfen, nie gesendet.
SEO / Web-Tools
Meta-Tags, Open Graph und Twitter Card lokal erzeugen — Vorschauen aus Ihren Eingaben simuliert, nie von Ihrer Live-Site abgerufen.
Entwickler-Dienstprogramme
Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.
Text & Markdown
Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.
KI & LLM
Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.
Testdaten
Synthetische Feldwerte für Fixtures und DB-Seed — zuerst reservierte Telefonnummern.
Barcode-Etiketten
Code 128, EAN-13 und UPC-A im Browser zeichnen — PNG- und SVG-Download, kein GS1-Lookup.