border-shape CSS property

Syntax

/* Keyword */
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 border-shape-Eigenschaft kann entweder mit dem Schlüsselwort none angegeben werden oder mit einer oder zwei durch Leerzeichen getrennten Formdefinitionen, 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 mit einer der <basic-shape>-Funktionen.

<geometry-box> Optional

Definiert die Bezugsbox, relativ zu der die Rahmenform gezeichnet wird. Wenn nicht angegeben, ist die Standard-Bezugs-Geometriebox der Form:

• half-border-box, wenn eine einzige Grundform spezifiziert ist, was bedeutet, dass jeder definierte Rahmen auf der Form gezeichnet wird, wobei der Pfad durch die Mitte verläuft.
• border-box für die erste (äußere) Form und padding-box für die zweite (innere) Form, wenn zwei Grundformen spezifiziert sind. Der Rahmen beansprucht dann den Bereich zwischen den beiden Formen.

Beschreibung

Die border-shape-Eigenschaft kann auf Elemente angewendet werden, um präzis geformte Container wie Sprechblasen zu erstellen, wie hier gezeigt, oder abstrakte Tooltip-Designs, ohne dass Umwege erforderlich sind.

<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: Arial, Helvetica, sans-serif;
  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 die angewendete border-shape gut mit dem definierten border und box-shadow des Elements funktioniert – sie folgen der Form des Rahmens.

Unterstützte Formfunktionen

Sie können die border-shape eines Elements (einschließlich einer Inline- oder Pseudo-Element-Form) mit 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 jede Art von Form mithilfe der SVG-Pfad-String-Syntax. Die SVG-Pfadsyntax hat Einschränkungen – es können nur Pixelwerte verwendet werden 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 jede Art von Polygon über Koordinatenpaare von Scheitelpunkten. Wenn die gewünschte Form glatte Kurven enthält, wird empfohlen, shape() zu verwenden.
• shape(): Definiert jede Art von Form. Die Syntax von shape() ist CSS-kompatibler als die von path() und löst deren Schwächen.

Sie können nach jedem <basic-shape>-Wert auch ein optionales <geometry-box>-Schlüsselwort hinzufügen, um die Bezugsbox anzugeben, relativ zu der die Formen gezeichnet werden sollen.

Strich- und Füllmodi

Die border-shape-Eigenschaft hat die folgenden zwei Modi:

• Wenn ein einzelnes <basic-shape> im Wert angegeben ist, definiert diese Form die Form des Elementrahmens, wobei die definierten Rahmenstile als Umrandung um die Form gezeichnet werden, wie im vorherigen Beispiel gezeigt. Dies wird als Strichmodus bezeichnet.
• Wenn zwei <basic-shape>s im Wert angegeben sind, definiert die erste Form die äußere Grenze des Rahmens, die zweite Form definiert die innere Grenze des Rahmens, und jede definierte Rahmenfarbe füllt den Bereich zwischen den beiden Grenzen. Dies wird als Füllmodus bezeichnet.

Auswirkungen auf das Layout und Rendering

Die border-shape-Eigenschaft erzeugt einen rein visuellen Effekt – das Layout des Elements wird weiterhin basierend auf der zugrunde liegenden rechteckigen Boxdefinition berechnet, und der Inhaltsfluss wird nicht beeinträchtigt.

Der Inhalt des Elements und der Hintergrund werden durch die border-shape-Eigenschaft abgeschnitten (die innere Form im Füllmodus). Wenn die angegebene border-shape die gleiche Größe wie oder kleiner als der Inhalt/Hintergrund ist, müssen Sie die Bezugsbox nicht anpassen, es sei denn, Sie möchten einen Offset-Effekt erzeugen. Wenn jedoch die angegebene border-shape größer als der Inhalt/Hintergrund ist, werden Sie Lücken zwischen dem Rand des Hintergrunds und der Form(en) sehen. In solchen Fällen müssen Sie möglicherweise eine andere Bezugsbox verwenden, um die Anzeige zu korrigieren (siehe Umgang mit Border-Shapes, die größer sind als der Hintergrund des Elements für weitere Informationen).

Einschränkungen bei Rahmenstilen, die auf Rahmenformen angewendet werden

Nicht alle Rahmenstile werden auf Elemente angewendet, bei denen eine border-shape-Eigenschaft gesetzt ist. Die folgende Liste erklärt, wie jede Eigenschaft betroffen ist:

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

  • Block Startkante
  • Inline Startkante
  • Block Endkante
  • Inline Endkante

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

• border-image: Nicht angewendet.

• border-style: Nicht angewendet. Alle Rahmen werden mit einem solid-Stil gerendert.

• border-width: Im Strichmodus wird border-width direkt auf die gerenderte border-shape angewendet. Wenn mehrere Kanten unterschiedliche Rahmenbreiten haben, wählt der Browser eine Breite aus, die auf den gesamten Rahmen angewendet wird, unter Verwendung des gleichen Verfahrens, das für border-color beschrieben wird.

  Im Füllmodus wird der Rahmenbereich durch die Differenz zwischen den Bereichen der äußeren und inneren Formen definiert; daher hat border-width keinen direkten Einfluss auf die Breite des gerenderten Rahmens. Es hat jedoch einen indirekten Effekt – es beeinflusst weiterhin die Größe der Bezugsboxen, relativ zu denen die Formen gezeichnet werden (es sei denn, die <geometry-box> wird auf content-box oder padding-box gesetzt). Daher müssen Sie auch im Füllmodus die auf das zugrunde liegende Element gesetzte border-width berücksichtigen.

Als Beispiel, wenn 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;

Der gerenderte Kasten wird einen rechteckigen Rahmen mit abgerundeten Ecken haben. Der Rahmenstil wird solid sein, da andere Stile ignoriert werden. Die Rahmenbreite und -farbe betragen 40px und hotpink, jeweils – dies liegt daran, dass die border-left-Eigenschaft Stile auf die Inline-Startkante anwendet (angenommen, die Seite hat einen horizontalen writing-mode), was die erste Kante mit Rahmenstilen ist; diese wird vom Browser entsprechend der zuvor beschriebenen Prioritätenliste ausgewählt.

Interaktion mit border-radius und corner-shape

Die Eigenschaften border-radius und corner-shape sind nicht kompatibel mit border-shape. Wenn eine border-shape auf ein Element gesetzt ist, wird jede gesetzte border-radius ignoriert, daher hat corner-shape auch keine Wirkung. Die Eigenschaften border-shape und border-radius/corner-shape haben unterschiedliche Effekte und werden getrennt verwendet.

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

border-shape im Vergleich zu clip-path

Die clip-path-Eigenschaft verwendet ähnliche Werte wie border-shape und erzeugt ähnliche Effekte. Beide Eigenschaften können verwendet werden, um die Form eines Elements und damit den Treffbereich des Elements zu verändern und die Grenze zu verändern, innerhalb derer :hover-Effekte und zeigerbezogene Ereignisse aktivieren.

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

• clip-path verbirgt den Bereich des Elements, der sich außerhalb der durch die bereitgestellte Form definierten Region befindet.
• border-shape verändert die visuelle Darstellung des Elements so, dass es innerhalb der durch die bereitgestellte Form definierten Region sitzt.

Das bedeutet, dass border-shape den Inhalt des Elements abschneidet, während die overflow-Eigenschaft weiterhin dessen Anzeige steuert, während clip-path den Inhalt des Elements vollständig verbirgt, sodass keine Überlaufsteuerung möglich ist.

Wesentlich ist dabei, dass Eigenschaften wie box-shadow und outline nicht der durch clip-path erzeugten Form folgen – es schneidet den äußeren Bereich des Elements ab, was bedeutet, dass solche Effekte auf unschöne Weise gekürzt oder ganz entfernt werden. Die border-shape-Eigenschaft hingegen erzeugt einen anders geformten Rahmen, der von solchen Effekten sauber umrandet wird.

Umgang mit Border-Shapes, die größer sind als der Hintergrund des Elements

Wie zuvor erwähnt, kann ein Problem bei border-shape auftreten, wenn Sie eine Form definieren, die größer als der Inhalt/Hintergrund des Elements ist, dass eine Lücke zwischen dem Hintergrund und dem Rahmen entstehen kann.

Der empfohlene Ansatz zur Behebung dieses Problems besteht darin, die Referenz-<geometry-box> auf content-box zu setzen und dann padding zu verwenden, um die Lücken zwischen dem Inhalt und dem Rahmen auszufü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 es kleiner wird und der Hintergrund die Teile der Form ausfüllt, die sich außerhalb des Inhaltsbereichs erstrecken. Sie können diese Technik in unserem unregelmäßigen Teil eines Puzzles-Navigationsmenü-Beispiel 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 border-shape-Strichverwendung

Dieses Beispiel zeigt, wie border-shape im Strichmodus 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: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  padding: 40px 50px;
  background-color: chartreuse;
  display: flex;
  align-items: center;
}

Wir geben dem Kasten eine width von fit-content und ein aspect-ratio von 1/1, um den Inhalt sauber in einem Quadrat anzupassen. Wir setzen auch einen dicken schwarzen border und einen box-shadow, bevor wir eine border-shape von circle(50%) setzen, um einen kreisförmigen Rahmen zu erstellen, der den Inhalt und den Hintergrund sauber umschließt.

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 der border und der box-shadow sauber die definierte Form umrandet.

Grundlegende border-shape-Füllverwendung

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

Das HTML ist das gleiche wie im vorherigen Beispiel.

CSS

Das CSS ist dasselbe wie im vorherigen Beispiel, außer dass wir dieses Mal den Rahmen hotpink einfärben und wir zwei <basic-shape>-Definitionen in den border-shape-Wert aufnehmen. Es gibt ein äußeres Rechteck, das den gesamten Inhaltsbereich abdeckt, und einen inneren Kreis, der derselbe ist wie im vorherigen Beispiel.

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, wie dieses Mal der Rahmen den Bereich zwischen dem Rechteck und dem Kreis abdeckt und die in der border-Deklaration festgelegte Farbe annimmt.

Vergleich von border-shape-Werten

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

HTML

Das HTML ist ähnlich wie im vorherigen Beispiel, außer dass wir dieses Mal etwas mehr Text im <p>-Element einfügen. Wir haben auch ein <select>-Element aufgenommen, mit dem Sie verschiedene Klassen für das <p>-Element über JavaScript auswählen können (wir haben sowohl das <select> als auch das JavaScript aus Gründen der Kürze 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 verschiedene border-shape-Werte auf das <p>-Element. Zunächst ist eine class von ellipse auf dem <p>-Element gesetzt, sodass es Anfangs eine 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 der Box 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ü, um zu sehen, wie die verschiedenen Rahmenformen gerendert werden. Verwenden Sie dabei gerne jederzeit die Entwicklertools Ihres Browsers, um die auf das <p>-Element angewendeten border-shape-Werte zu inspizieren und bearbeiten Sie sie, um ein Gefühl dafür zu bekommen, wie die Werte funktionieren.

Animation einer border-shape

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

HTML

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

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

CSS

Für dieses Beispiel wenden wir eine 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 auch eine animation auf die :hover- und :focus-Zustände des <p>-Elements, sodass, wenn das Element fokussiert oder beim Darüberschweben animiert wird, es zwischen zwei Polygonrahmenformen für unendliche Iterationen hin und her gleitet.

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 oder fokussieren Sie den Absatz, 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
• Ein unregelmäßiges Navigationsmenü mit border-shape erstellen
• CSS-Rahmen und Box-Dekorationen Modul
• CSS-Hintergründe und Rahmen Modul
• border-shape: die Zukunft des nicht-rechteckigen Webs von Una Kravets (2026)
• Bereiten Sie sich auf die leistungsstarke CSS border-shape-Eigenschaft vor! auf CSS Tricks (2026)