border-shape CSS property

Syntax

/* Keyword value */
border-shape: none;

/* Single <basic-shape> value */
border-shape: circle(50%);
border-shape: rect(10px 460px 130px 20px round 20px);
border-shape: shape(
  from 5% 0.5rem,
  arc to 80px 1pt of 10% ccw large rotate 25deg
);

/* Two <basic-shape> values */
border-shape: circle(50%) ellipse(40% 30%);
border-shape: polygon(0% 0%, 0% 100%, 100% 0%)
  polygon(10% 10%, 10% 70%, 70% 10%);

/* <basic-shape> and <geometry-box> values */
border-shape: circle(50%) border-box ellipse(40% 30%) view-box;
border-shape: rect(5px 198px 189px 0px round 20px) view-box circle(50%);
border-shape: path(
    "M 35,95 C 35,50 60,15 100,20 C 120,5 160,5 180,22 C 200,5 250,5 270,22 C 295,5 340,5 360,22 C 395,10 440,35 440,75 C 455,90 450,120 430,128 C 400,145 360,145 330,130 C 300,145 260,145 230,130 C 200,145 160,145 130,130 C 80,142 35,120 35,95 Z"
  )
  view-box;

/* Global values */
border-shape: inherit;
border-shape: initial;
border-shape: revert;
border-shape: revert-layer;
border-shape: unset;

Die Eigenschaft border-shape kann mit dem Schlüsselwort none oder mit einer oder zwei durch Leerzeichen getrennten Formdefinitionen angegeben werden, die jeweils aus einem <basic-shape>-Wert oder einem <basic-shape>-Wert und einem <geometry-box>-Wert bestehen.

Werte

none

Gibt an, dass keine Rahmenform definiert ist. Dies ist der Anfangswert.

<basic-shape>

Definiert die Form des Rahmens mithilfe einer der <basic-shape>-Funktionen.

<geometry-box> Optional

Definiert das Referenzfeld, relativ zu dem die Rahmenform gezeichnet wird. Wenn es nicht angegeben wird, ist das Referenzgeometriefeld der Form standardmäßig:

• half-border-box, wenn eine einzelne Grundform angegeben ist. Dies bedeutet, dass jeder definierte Rahmen über dem Formpfad gezeichnet wird, wobei der Pfad durch dessen Mitte verläuft.
• border-box für die erste (äußere) Form und padding-box für die zweite (innere) Form, wenn zwei Grundformen angegeben sind. Der Rahmen nimmt dann den Bereich zwischen den beiden Formen ein.

Beschreibung

Die Eigenschaft border-shape kann auf Elemente angewendet werden, um präzise geformte Container wie Sprechblasen, wie hier gezeigt, oder abstrakte Tooltip-Designs zu erstellen, ohne auf Workarounds zurückgreifen zu müssen.

<img src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg" />
<p>I am a leopard</p>

html {
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  width: 300px;
  anchor-name: --leopard;
  position: relative;
  top: 45px;
}

p {
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
  padding: 15px 0;
  margin: 0 0 -30px -110px;
  background-color: chartreuse;
  border: 7px solid rgb(50 50 50);
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.75);

  width: 250px;
  height: 100px;
  border-shape: shape(
      from 50.08% 0%,
      curve to 97.71% 25.55% with 72.95% 0%/93.9% 8.76%,
      curve to 97.71% 62.04% with 100.76% 37.96%/100.76% 49.64%,
      curve to 50.08% 83.94% with 93.9% 75.18%/72.95% 83.94%,
      curve to 23.41% 82.48% with 36.75% 83.94%/27.22% 83.21%,
      curve to 17.7% 100% with 21.51% 87.59%/19.22% 94.16%,
      curve to 11.98% 82.48% with 16.17% 94.16%/13.89% 87.59%,
      curve to 1.31% 62.04% with 13.5% 81.75%/3.98% 76.64%,
      curve to 2.45% 25.55% with -0.59% 49.64%/-0.59% 37.96%,
      curve to 50.08% 0% with 6.26% 8.76%/27.22% 0%,
      close
    )
    content-box;

  text-align: center;
  line-height: 4;

  position: absolute;
  position-anchor: --leopard;
  bottom: anchor(top);
  left: anchor(right);
}

Beachten Sie, wie das angewendete border-shape gut mit dem auf dem Element definierten border und box-shadow zusammenwirkt — sie folgen der Form des Rahmens.

Unterstützte Formfunktionen

Sie können das border-shape eines Elements, einschließlich eines Inline- oder Pseudo-Elements, mithilfe einer der <basic-shape>-Funktionen definieren. Diese Funktionen umfassen:

• inset(), rect() und xywh(): Bieten verschiedene Möglichkeiten, grundlegende Rechteckformen zu definieren.
• circle(): Definiert Kreisformen.
• ellipse(): Definiert Ellipsenformen.
• path(): Definiert beliebige Formen mithilfe der Stringsyntax für SVG-Pfade. Die SVG-Pfadsyntax hat Einschränkungen — sie kann nur Pixelwerte verwenden, und der Pfad muss als einzelner String definiert werden, sodass benutzerdefinierte Eigenschaften nicht über var() eingebunden werden können. Es wird empfohlen, stattdessen shape() zu verwenden.
• polygon(): Definiert beliebige Polygone über Paare von Scheitelpunktkoordinaten. Wenn Ihre gewünschte Form weiche Kurven enthält, wird empfohlen, shape() zu verwenden.
• shape(): Definiert beliebige Formen. Die Syntax von shape() ist CSS-kompatibler als die von path() und behebt deren Mängel.

Sie können außerdem nach jedem <basic-shape>-Wert ein optionales Schlüsselwort <geometry-box> einfügen, um das Referenzfeld anzugeben, relativ zu dem die Formen gezeichnet werden sollen.

Kontur- und Füllmodi

Die Eigenschaft border-shape hat die folgenden zwei Modi:

• Wenn im Wert eine einzelne <basic-shape> angegeben wird, definiert diese Form die Form des Elementrahmens. Die definierten Rahmenstile werden dabei als Kontur um die Form gezeichnet, wie im vorherigen Beispiel gezeigt. Dies wird als Konturmodus bezeichnet.
• Wenn im Wert zwei <basic-shape>s angegeben werden, definiert die erste Form die äußere Begrenzung des Rahmens, die zweite Form die innere Begrenzung des Rahmens, und jede definierte Rahmenfarbe füllt den Bereich zwischen den beiden Begrenzungen. Dies wird als Füllmodus bezeichnet.

Auswirkungen auf Layout und Rendering

Die Eigenschaft border-shape erzeugt einen rein visuellen Effekt — das Layout des Elements wird weiterhin anhand der zugrunde liegenden rechteckigen Felddefinition berechnet, und der Inhaltsfluss wird nicht beeinflusst.

Der Inhalt und Hintergrund des Elements werden durch die Eigenschaft border-shape beschnitten, im Füllmodus durch die innere Form. Wenn das angegebene border-shape dieselbe Größe wie oder eine kleinere Größe als Inhalt/Hintergrund hat, müssen Sie das Referenzfeld nicht anpassen, es sei denn, Sie möchten eine Art Versatzwirkung erzeugen. Wenn das angegebene border-shape jedoch größer als Inhalt/Hintergrund ist, sehen Sie Lücken zwischen der Kante des Hintergrunds und der bzw. den Formen. In solchen Fällen müssen Sie möglicherweise ein anderes Referenzfeld verwenden, um die Darstellung zu korrigieren (weitere Informationen finden Sie unter Umgang mit border-shapes, die größer als der Hintergrund des Elements sind).

Einschränkungen bei Rahmenstilen für Rahmenformen

Nicht alle Rahmenstile werden auf Elemente angewendet, für die eine Eigenschaft border-shape festgelegt ist. Die folgende Liste erläutert, wie jede Eigenschaft beeinflusst wird:

• border-color: Diese Eigenschaft wird angewendet. Wenn jedoch mehrere Elementrahmen unterschiedliche Farben haben, wählt der Browser die erste Kante mit einer Rahmenfarbe in der folgenden Reihenfolge:

  • Blockstartkante
  • Inlinestartkante
  • Blockendkante
  • Inlineendkante

  Der Browser wendet dann die Rahmenfarbe dieser Kante auf das gesamte gerenderte border-shape an.

• border-image: Wird nicht angewendet.

• border-style: Wird nicht angewendet. Alle Rahmen werden mit dem Stil solid gerendert.

• border-width: Im Konturmodus wird border-width direkt auf das gerenderte border-shape angewendet. Wenn mehrere Kanten unterschiedliche Rahmenbreiten haben, wählt der Browser mithilfe desselben für border-color beschriebenen Verfahrens eine Breite aus, die auf den gesamten Rahmen angewendet wird.

  Im Füllmodus wird der Rahmenbereich durch den Unterschied zwischen den Flächen der äußeren und inneren Formen definiert; daher hat border-width keine direkte Auswirkung auf die Breite des gerenderten Rahmens. Es hat jedoch eine indirekte Auswirkung — es beeinflusst weiterhin die Größe der Referenzfelder, relativ zu denen die Formen gezeichnet werden, es sei denn, Sie setzen deren <geometry-box> auf content-box oder padding-box. Daher müssen Sie auch bei Verwendung des Füllmodus die für das zugrunde liegende Element festgelegte border-width berücksichtigen.

Wenn beispielsweise auf ein Element die folgenden Deklarationen angewendet werden:

border-shape: rect(5px 198px 189px 0px round 20px);
border-bottom: 30px dashed blue;
border-left: 40px dotted hotpink;
border-right: 50px double yellow;

wird das gerenderte Feld einen rechteckigen Rahmen mit abgerundeten Ecken haben. Der Rahmenstil wird solid sein, da andere Stile ignoriert werden. Die Rahmenbreite und -farbe werden 40px beziehungsweise hotpink sein — dies liegt daran, dass die Eigenschaft border-left Stile auf die Inlinestartkante anwendet, vorausgesetzt, dass die Seite einen horizontalen writing-mode hat. Dies ist die erste Kante mit Rahmenstilen; sie wird vom Browser gemäß der zuvor beschriebenen Prioritätsliste ausgewählt.

Interaktion mit border-radius und corner-shape

Die Eigenschaften border-radius und corner-shape sind nicht mit border-shape kompatibel. Wenn für ein Element ein border-shape festgelegt ist, wird jedes gesetzte border-radius ignoriert; daher hat auch corner-shape keine Auswirkung. Die Eigenschaften border-shape und border-radius/corner-shape haben unterschiedliche Auswirkungen und werden getrennt verwendet.

Wenn Sie geformte Ecken in einem border-shape verwenden möchten, müssen Sie diese direkt als Teil der Form zeichnen.

border-shape im Vergleich zu clip-path

Die Eigenschaft clip-path akzeptiert ähnliche Werte wie border-shape und erzeugt ähnliche Effekte. Beide Eigenschaften können verwendet werden, um die Form eines Elements und damit dessen Trefferbereich zu ändern, wodurch die Begrenzung verändert wird, innerhalb derer :hover-Effekte und zeigerbezogene Ereignisse aktiviert werden.

Es gibt jedoch einen grundlegenden Unterschied in der Funktionsweise der beiden Eigenschaften:

• clip-path verbirgt den Bereich des Elements, der außerhalb der durch die bereitgestellte Form definierten Region liegt.
• border-shape verändert das visuelle Rendering des Elements, sodass es innerhalb der durch die bereitgestellte Form definierten Region liegt.

Das bedeutet, dass border-shape den Inhalt des Elements beschneidet und gleichzeitig die Eigenschaft overflow dessen Darstellung steuern lässt, während clip-path den Elementinhalt vollständig verbirgt, sodass keine Überlaufsteuerung möglich ist.

Noch wichtiger ist, dass Eigenschaften wie box-shadow und outline nicht der durch clip-path erzeugten Form folgen — es schneidet die Außenseite des Elements ab, was bedeutet, dass solche Effekte unschön abgeschnitten oder vollständig entfernt werden. Die Eigenschaft border-shape erzeugt hingegen einen anders geformten Rahmen, dem solche Effekte sauber folgen.

Umgang mit border-shapes, die größer als der Hintergrund des Elements sind

Wie bereits erwähnt, besteht ein Problem bei border-shape darin, dass beim Definieren einer Form, die größer als der Inhalt/Hintergrund des Elements ist, eine Lücke zwischen Hintergrund und Rahmen entstehen kann.

Der empfohlene Ansatz zur Behebung besteht darin, das Referenz-<geometry-box> auf content-box zu setzen und anschließend padding zu verwenden, um die Lücken zwischen Inhalt und Rahmen zu füllen. Zum Beispiel:

border-shape: shape(
    from 0% 0%,
    hline to 33%,
    arc by 33% 0% of 16% 20% small cw,
    hline to 100%,
    line to 100% 33%,
    arc by 0% 33% of 20% 16% small cw,
    line to 100% 100%,
    hline to 66%,
    arc by -33% 0% of 16% 20% small ccw,
    hline to 0%,
    line to 0% 66%,
    arc by 0% -33% of 20% 16% small ccw,
    close
  )
  content-box;
padding: 24px;

Auf diese Weise wird das padding außerhalb der Form festgelegt, wodurch sie kleiner wird und der Hintergrund gezwungen wird, die Teile der Form auszufüllen, die über den Inhaltsbereich hinausreichen. Sie können diese Technik in unserem Beispiel für ein Navigationsmenü mit unregelmäßigen Puzzleteilen in Aktion sehen.

Formale Definition

Formale Syntax

border-shape = 
  none                                    |
  [ <basic-shape> <geometry-box>? ]{1,2}  

<basic-shape> = 
  <basic-shape-rect>  |
  <circle()>          |
  <ellipse()>         |
  <polygon()>         |
  <path()>            |
  <shape()>           

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<basic-shape-rect> = 
  <inset()>  |
  <rect()>   |
  <xywh()>   

<circle()> = 
  circle( <radial-size>? [ at <position> ]? )  

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<polygon()> = 
  polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )  

<path()> = 
  path( <'fill-rule'>? , <string> )  

<shape()> = 
  shape( <'fill-rule'>? from <position> , <shape-command># )  

<shape-box> = 
  <visual-box>     |
  margin-box       |
  half-border-box  

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )  

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-command> = 
  <move-command>             |
  <line-command>             |
  close                      |
  <horizontal-line-command>  |
  <vertical-line-command>    |
  <curve-command>            |
  <smooth-command>           |
  <arc-command>              

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<move-command> = 
  move <command-end-point>  

<line-command> = 
  line <command-end-point>  

<horizontal-line-command> = 
  hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]  

<vertical-line-command> = 
  vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]  

<curve-command> = 
  curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]  

<smooth-command> = 
  smooth [ [ to <position> [ with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]  

<arc-command> = 
  arc <command-end-point> [ [ of <length-percentage>{1,2} ] && <arc-sweep>? && <arc-size>? && [ rotate <angle> ]? ]  

<command-end-point> = 
  to <position>         |
  by <coordinate-pair>  

<control-point> = 
  <position>                |
  <relative-control-point>  

<coordinate-pair> = 
  <length-percentage>{2}  

<relative-control-point> = 
  <coordinate-pair> [ from [ start | end | origin ] ]?  

<arc-sweep> = 
  cw   |
  ccw  

<arc-size> = 
  large  |
  small  

Beispiele

Grundlegende Verwendung von border-shape im Konturmodus

Dieses Beispiel zeigt, wie border-shape im Konturmodus verwendet wird.

HTML

Das Markup für dieses Beispiel enthält ein einzelnes <p>-Element.

<p>Circle</p>

CSS

html {
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  box-sizing: border-box;
  font-family: "Helvetica", "Arial";
  font-size: 1.6rem;
  padding: 40px 50px;
  background-color: chartreuse;
  display: flex;
  align-items: center;
}

Wir geben dem Feld eine width von fit-content und ein aspect-ratio von 1/1, damit der Inhalt sauber in ein Quadrat passt. Außerdem setzen wir einen dicken schwarzen border und einen box-shadow, bevor wir ein border-shape von circle(50%) festlegen, um einen kreisförmigen Rahmen zu erzeugen, der sauber um Inhalt und Hintergrund passt.

p {
  width: fit-content;
  aspect-ratio: 1/1;
  border: 15px solid black;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
  border-shape: circle(50%);
}

Ergebnis

Beachten Sie, wie border und box-shadow der definierten Form sauber folgen.

Grundlegende Verwendung von border-shape im Füllmodus

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie border-shape im Füllmodus verwendet wird, um einen unregelmäßigen gefüllten Rahmen zu erstellen.

Das HTML ist dasselbe wie im vorherigen Beispiel.

CSS

Das CSS ist dasselbe wie im vorherigen Beispiel, außer dass wir den Rahmen diesmal mit hotpink einfärben und zwei <basic-shape>-Definitionen in den Wert von border-shape aufnehmen. Es gibt ein äußeres Rechteck, das den gesamten Bereich des Inhalts abdeckt, und einen inneren Kreis, der dem aus dem vorherigen Beispiel entspricht.

p {
  width: fit-content;
  aspect-ratio: 1/1;
  border: 15px solid hotpink;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
  border-shape: rect(0% 100% 100% 0% round 20px) circle(50%);
}

Ergebnis

Beachten Sie, dass der Rahmen diesmal den Bereich zwischen dem Rechteck und dem Kreis abdeckt und die in der border-Deklaration festgelegte Farbe übernimmt.

Vergleich von border-shape-Werten

In diesem Beispiel können Sie aus verschiedenen border-shape-Werten auswählen, die auf ein Element angewendet werden, sodass Sie vergleichen können, wie sie gerendert werden.

HTML

Das HTML ähnelt dem im vorherigen Beispiel, außer dass wir diesmal etwas mehr Text im <p>-Element enthalten. Außerdem haben wir ein <select>-Element eingefügt, damit Sie über JavaScript verschiedene Klassen auswählen können, die auf das <p> angewendet werden; der Übersichtlichkeit halber haben wir sowohl <select> als auch das JavaScript ausgeblendet.

<p>Blessed are the cheesemakers.</p>

<form>
  <label for="shape-select">Select border-shape type:</label>
  <br />
  <select id="shape-select">
    <option>circle</option>
    <option selected>ellipse</option>
    <option>inset</option>
    <option>path</option>
    <option>polygon</option>
    <option>rect</option>
    <option>shape</option>
    <option>two-polygons</option>
    <option>xywh</option>
  </select>
</form>

Die Klassen setzen unterschiedliche border-shape-Werte für das <p>-Element. Zu Beginn wird für das <p>-Element eine class von ellipse gesetzt, sodass es anfangs ein ellipse()-border-shape hat.

const box = document.querySelector("p");
const select = document.querySelector("select");

select.addEventListener("change", selectClass);

function selectClass() {
  box.className = select.value;
}

selectClass();

CSS

Im CSS geben wir dem Feld eine width von 550px, einen dicken schwarzen border und einen box-shadow.

p {
  width: 550px;
  border: 15px solid black;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
}

Als Nächstes definieren wir die Regeln für jede der Klassen, die angewendet werden, wenn Sie die verschiedenen Optionen im <select>-Element auswählen:

.circle {
  border-shape: circle(60%);
}

.ellipse {
  border-shape: ellipse(50% 40%);
}

.inset {
  border-shape: inset(10px 20px 10px 20px round 20px);
}

.path {
  border-shape: path(
      "M 35,95 C 35,50 60,15 100,20 C 120,5 160,5 180,22 C 200,5 250,5 270,22 C 295,5 340,5 360,22 C 460,10 477,35 496,75 C 515,157 450,120 430,128 C 400,145 360,145 330,130 C 300,145 260,145 230,130 C 200,145 160,145 130,130 C 80,142 35,120 35,95 Z"
    )
    view-box;
}

.polygon {
  border-shape: polygon(0% 60%, 0% 85%, 8% 100%, 18% 88%, 30% 100%, 42% 88%, 55% 100%, 68% 88%, 80% 100%, 86% 88%, 90% 75%, 100% 60%, 90% 30%, 85% 5%, 75% 18%, 65% 3%, 52% 16%, 40% 3%, 27% 16%, 15% 3%, 5% 18%) view-box;
}

.rect {
  border-shape: rect(10px 500px 130px 20px round 20px);
}

.shape {
  border-shape: shape(
    from 0% 64.5%,
    curve to 15.71% 8.26% with 0% 30.76%/6.04% 4.51%,
    curve to 35.05% 9.76% with 20.55% -2.99%/30.21% -2.99%,
    curve to 56.8% 9.76% with 39.88% -2.99%/51.97% -2.99%,
    curve to 78.56% 9.76% with 62.84% -2.99%/73.72% -2.99%,
    curve to 97.89% 49.5% with 87.02% 0.76%/97.89% 19.51%,
    curve to 95.47% 89.25% with 101.52% 60.75%/100.31% 83.25%,
    curve to 71.3% 90.75% with 88.22% 102%/78.56% 102%,
    curve to 47.13% 90.75% with 64.05% 102%/54.38% 102%,
    curve to 22.96% 90.75% with 39.88% 102%/30.21% 102%,
    curve to 0% 64.5% with 10.88% 99.75%/0% 83.25%,
    close
  );
}

.two-polygons {
  border-shape: polygon(0% 60%, 0% 85%, 8% 100%, 18% 88%, 30% 100%, 42% 88%, 55% 100%, 68% 88%, 80% 105%, 86% 88%, 91% 75%, 101% 60%, 93% 30%, 86% 5%, 75% 18%, 65% 3%, 52% 16%, 40% 3%, 27% 16%, 15% 3%, 5% 18%)
    polygon(0% 55%, 0% 90%, 6% 104%, 17% 93%, 30% 100%, 43% 93%, 56% 102%, 69% 93%, 81% 102%, 88% 93%, 94% 78%, 100% 58%, 94% 24%, 88% -2%, 76% 13%, 64% -4%, 51% 11%, 39% -4%, 26% 11%, 13% -4%, 3% 13%);
}

.xywh {
  border-shape: xywh(5% 5% 90% 90% round 20px);
}

form {
  position: absolute;
  border: 2px solid black;
  background: white;
  padding: 5px;
  bottom: 0;
  right: 0;
}

form select {
  width: 100%;
  padding: 2px 5px;
  margin-top: 10px;
}

Ergebnis

Wählen Sie verschiedene Optionen aus dem Dropdown-Menü aus, um zu sehen, wie die unterschiedlichen Rahmenformen gerendert werden. Sie können jederzeit die Entwicklerwerkzeuge Ihres Browsers verwenden, um die auf das <p>-Element angewendeten border-shape-Werte zu untersuchen und zu bearbeiten, um ein Gefühl dafür zu bekommen, wie die Werte funktionieren.

Animation eines border-shape

Dieses Beispiel demonstriert, wie Sie die Eigenschaft border-shape animieren können.

HTML

Dasselbe <p>-Element wie im vorherigen Beispiel wird verwendet, außer dass wir diesmal ein tabindex-Attribut eingefügt haben, damit es über die Tastatur fokussiert werden kann.

<p tabindex="0">Blessed are the cheesemakers.</p>

CSS

Für dieses Beispiel wenden wir ein polygon()-border-shape auf das <p> an.

p {
  width: 550px;
  border: 15px solid black;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
  border-shape: polygon(0% 60%, 0% 85%, 8% 100%, 18% 88%, 30% 100%, 42% 88%, 55% 100%, 68% 88%, 80% 100%, 86% 88%, 90% 75%, 100% 60%, 90% 30%, 85% 5%, 75% 18%, 65% 3%, 52% 16%, 40% 3%, 27% 16%, 15% 3%, 5% 18%) view-box;
}

Wir setzen außerdem eine animation für die Zustände :hover und :focus des <p>-Elements, sodass es bei Hover oder Fokus für unendlich viele Wiederholungen sanft zwischen zwei polygonalen Rahmenformen hin- und heranimiert wird.

p:hover,
p:focus {
  animation: morph 1s ease-in-out infinite alternate;
}

@keyframes morph {
  from {
    border-shape: polygon(0% 60%, 0% 85%, 8% 100%, 18% 88%, 30% 100%, 42% 88%, 55% 100%, 68% 88%, 80% 100%, 86% 88%, 90% 75%, 100% 60%, 90% 30%, 85% 5%, 75% 18%, 65% 3%, 52% 16%, 40% 3%, 27% 16%, 15% 3%, 5% 18%) view-box;
  }
  to {
    border-shape: polygon(0% 55%, 0% 90%, 6% 104%, 17% 93%, 30% 100%, 43% 93%, 56% 102%, 69% 93%, 81% 102%, 88% 93%, 94% 78%, 100% 58%, 94% 24%, 88% -2%, 76% 13%, 64% -4%, 51% 11%, 39% -4%, 26% 11%, 13% -4%, 3% 13%) view-box;
  }
}

Ergebnis

Bewegen Sie den Mauszeiger über den Absatz oder fokussieren Sie ihn, um die Animation zu sehen.

@supports not (border-shape: circle(50%)) {
  body::before {
    content: "Your browser does not support the 'border-shape' property.";
    font-family: sans-serif;
    background-color: wheat;
    padding: 1rem 0;
    text-align: center;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• border
• corner-shape
• Erstellen eines unregelmäßigen Navigationsmenüs mit border-shape
• Modul CSS-Rahmen und Felddekorationen
• Modul CSS-Hintergründe und Rahmen
• border-shape: the future of the non-rectangular web von Una Kravets (2026)
• Get Ready For the Powerful CSS border-shape Property! auf CSS Tricks (2026)