W3docs
de
Anmelden

CSS border-top-left-radius Eigenschaft

Die border-top-left-radius CSS-Eigenschaft definiert die Form der oberen linken Ecke eines Elements. Hier finden Sie Beispiele.

Die CSS-Eigenschaft border-top-left-radius rundet die obere linke Ecke des Rahmen-Box eines Elements ab. Sie ist eine der vier Langform-Eigenschaften — zusammen mit border-top-right-radius, border-bottom-left-radius und border-bottom-right-radius — in die die Kurzschreibweise border-radius aufgelöst wird. Verwenden Sie diese Langform, wenn Sie nur eine Ecke abrunden möchten.

Die Eigenschaft border-top-left-radius gehört zu den CSS3-Eigenschaften.

Die Ecke kann zu einem Kreis oder einer Ellipse abgerundet werden oder eckig bleiben, wenn kein Wert angegeben wird. Wenn Sie ein Hintergrundbild oder eine Farbe verwenden, wird es an die Rahmenform angepasst. Das Schnittverhalten wird durch die Eigenschaft background-clip gesteuert.

So funktionieren die Werte

Die Eigenschaft border-top-left-radius akzeptiert einen oder zwei Werte, die jeweils als <length> oder <percentage> angegeben werden:

  • Ein Wert legt sowohl den horizontalen als auch den vertikalen Radius der Ecke fest und erzeugt eine kreisförmige (Viertelkreis-)Kurve.
  • Zwei Werte legen die Radien einer Ellipse fest: der erste ist der horizontale Radius, der zweite der vertikale Radius.

Prozentwerte für den horizontalen Radius beziehen sich auf die Breite des Elements, während Prozentwerte für den vertikalen Radius auf dessen Höhe verweisen. Negative Werte sind ungültig und die Deklaration wird ignoriert.

Hinweis: Wenn die Summe der Radien auf einer Seite die Länge dieser Seite überschreitet, skaliert der Browser jeden Eckradius proportional herunter, damit sich die Kurven nie überlappen. Ein einzelner sehr großer Wert wie border-top-left-radius: 9999px ist daher eine sichere Methode, eine Ecke so rund wie möglich zu machen.

Anfangswert0
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbtNein
AnimierbarJa. Der Radius des Rahmens ist animierbar.
VersionCSS3
DOM Syntaxobject.style.borderTopLeftRadius = "25px";

Syntax

Syntax der CSS border-top-left-radius Eigenschaft

border-top-left-radius: length | % | initial | inherit;

Hier ist ein Beispiel für border-top-left-radius, bei dem nur ein Wert verwendet wird. Wenn nur ein Wert verwendet wird, legt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse fest.

Beispiel der border-top-left-radius Eigenschaft:

Beispiel der CSS border-top-left-radius Eigenschaft mit nur einem Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #8ebf42;
        border: 4px solid #000000;
        border-top-left-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS border-top-left-radius Eigenschaft

Im folgenden Beispiel legt der erste Wert den horizontalen Radius und der zweite den vertikalen Radius fest.

Beispiel der border-top-left-radius Eigenschaft mit zwei Werten:

Beispiel der CSS border-top-left-radius Eigenschaft mit zwei Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #ccc;
        border: 4px solid #000000;
        border-top-left-radius: 50px 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Probier es selbst »

Das folgende Beispiel verwendet Prozentwerte. Der erste Wert definiert den horizontalen Radius und der zweite den vertikalen Radius.

Beispiel der border-top-left-radius Eigenschaft mit dem "%"-Wert:

Beispiel der CSS border-top-left-radius Eigenschaft mit Prozentwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #eee;
        border: 4px solid #000000;
        border-top-left-radius: 50% 60%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
lengthDefiniert die Abrundung der oberen linken Ecke.Ausprobieren »
%Definiert die Abrundung der oberen linken Ecke in Prozent.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Wann die Langform verwendet werden sollte

Verwenden Sie border-top-left-radius, wenn nur eine Ecke abgerundet werden muss — zum Beispiel bei einem Tab, einer Sprechblase oder einer Karte, deren obere Kante bündig an einem Header anliegt. Um alle Ecken auf einmal abzurunden, ist die Kurzschreibweise border-radius kürzer:

/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;

Verwandte Eigenschaften

Browser-Unterstützung

border-top-left-radius wird in allen modernen Browsern (Chrome, Firefox, Safari, Edge) ohne Vendor-Präfix unterstützt.

Übung

Übung
Was macht die Eigenschaft 'border-top-left-radius' in CSS?
Was macht die Eigenschaft 'border-top-left-radius' in CSS?
Was this page helpful?