Warum verändert mein Rahmen das Seitenlayout?

Weil er im Standard-Boxmodell zur Größe des Elements dazukommt. Setz entweder box-sizing: border-box, oder nimm im Ruhezustand einen transparenten Rahmen derselben Breite, damit sich nichts bewegt, wenn er sichtbar wird.

Kann jede Ecke einen anderen Radius haben?

Ja, und der Generator stellt sie einzeln ein. border-radius nimmt bis zu vier Werte, und jede Ecke kann außerdem getrennte horizontale und vertikale Radien für eine elliptische Rundung haben.

Kann der CSS Border Generator einen Schatten oder Verlaufsrahmen hinzufügen?

Nein, er kümmert sich um Breite, Linienstil, Farbe und Eckenradius, für alle Seiten gemeinsam oder für jede Seite einzeln. Schatten entstehen über eine andere Eigenschaft, und dafür gibt es den CSS-Box-Shadow-Generator. Verlaufsrahmen und border-image werden hier nicht unterstützt.

CSS Border Generator

Stelle Rahmenbreite, Stil, Farbe und den Radius jeder Ecke visuell ein und kopiere dann das CSS. Schneller, als vier Radiuswerte zu raten und neu zu laden.

Browser-Tool

Vorschau

Erzeugter Code

.box {
  border: 2px solid #b83a2c;
  border-radius: 12px;
}

Dateiname

.css

Über CSS-Rahmen-Generator

Rahmen sind vier Eigenschaften, die zusammenwirken, und der Eckenradius sind vier weitere. Werte raten und neu laden ist langsam; sie an einer Live-Vorschau anzupassen, nicht. Heraus kommt das CSS, das genau das erzeugt, was du siehst. Ohne Anmeldung und kostenlos. Alles entsteht im Browser, deine Werte werden also nirgendwohin gesendet.

So nutzt du CSS-Rahmen-Generator

Breite, Stil und Farbe festlegenPro Seite, wo sich die Seiten unterscheiden: Ein einzelner unterer Rahmen ist in Oberflächen viel häufiger als vier gleiche.
Die Ecken abrundenJede Ecke kann ihren eigenen Radius haben, und die Vorschau zeigt sofort, wenn ein Radius größer ist, als die Box aufnehmen kann.
Das CSS kopierenAls Einzeleigenschaften oder Kurzschreibweise, je nachdem, was zu dem Stylesheet passt, in das du es einfügst.

Was passiert, wenn ein Radius zu groß ist

Ergeben die Radien an einer Kante zusammen mehr als die Länge dieser Kante, skaliert der Browser alle Radien des Elements um denselben Faktor, bis sie passen. Deshalb ergibt ein großer Radius auf einer kurzen Box eine Pille statt der angegebenen Form, und deshalb scheint der Effekt zu springen, statt abgeschnitten zu werden.

Was das Tool nicht kann

Ein Rahmen nimmt Platz im Layout ein. Er verändert die Größe des Elements, außer box-sizing ist border-box, und das ist die übliche Ursache, wenn ein Layout um ein paar Pixel springt, sobald beim Hover ein Rahmen erscheint.
Gestrichelte und gepunktete Linien werden von Browsern unterschiedlich gezeichnet, und beides lässt sich mit CSS nicht genau steuern.

CSS-Rahmen-Generator: häufige Fragen

Warum verändert mein Rahmen das Seitenlayout?: Weil er im Standard-Boxmodell zur Größe des Elements dazukommt. Setz entweder box-sizing: border-box, oder nimm im Ruhezustand einen transparenten Rahmen derselben Breite, damit sich nichts bewegt, wenn er sichtbar wird.
Kann jede Ecke einen anderen Radius haben?: Ja, und der Generator stellt sie einzeln ein. border-radius nimmt bis zu vier Werte, und jede Ecke kann außerdem getrennte horizontale und vertikale Radien für eine elliptische Rundung haben.
Kann der CSS Border Generator einen Schatten oder Verlaufsrahmen hinzufügen?: Nein, er kümmert sich um Breite, Linienstil, Farbe und Eckenradius, für alle Seiten gemeinsam oder für jede Seite einzeln. Schatten entstehen über eine andere Eigenschaft, und dafür gibt es den CSS-Box-Shadow-Generator. Verlaufsrahmen und border-image werden hier nicht unterstützt.

Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.

Die Tools, die man zusammen mit CSS-Rahmen-Generator am häufigsten braucht.

Du findest das passende Tool nicht?

Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.

Tool vorschlagen →