Heute möchte ich euch ein neues CSS Feature zeigen und zwar heisst es corner-shape. Damit kann man wie es der Name schon sagt, den Ecken eine neue Form geben. Damit kann man viele coole Dinge machen.

Ich stelle euch nicht nur ie neuesten Formen vor, sondern zeige euch an einem Beispiel was ihr damit alles cooles anstellen könnt.

Video

HTML

<div class="container">
      <div class="box box1"><h1>Round</h1></div>
      <div class="box box2"><h1>notch</h1></div>
      <div class="box box3"><h1>bevel</h1></div>
      <div class="box box4"><h1>scoop</h1></div>
      <div class="box box5"><h1>squircle</h1></div>
      <div class="box box6"><h1>kombinationen</h1></div>
      <div class="box box7"><h1>Label</h1></div>

      <div class="box box8"><h1>i like it</h1></div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff5b4;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.box {
  width: 400px;
  height: 300px;
  background: #00076a;

  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 3em;
  color: #fff;
}

.box1 {
  border-radius: 50px;
  corner-shape: round;
}
.box2 {
  border-radius: 50px;
  corner-shape: notch;
}
.box3 {
  border-radius: 50px;
  corner-shape: bevel; /* 50% = diamant */
}
.box4 {
  border-radius: 50px;
  corner-shape: scoop;
}
.box5 {
  border-radius: 50px;
  corner-shape: squircle;
}
.box6 {
  border-radius: 50px;
  corner-shape: bevel notch scoop squircle;
}

.box7 {
  border-radius: 50px 150px 150px 50px;
  corner-shape: round bevel bevel round;
}

.box8 {
  anchor-name: --box8;
  transition: 200ms;
}

.box8:hover {
  border-top-right-radius: 50px;
  corner-top-right-shape: scoop;
}
.box8::before {
  scale: 0;
  content: "👍";
  position: absolute;
  height: 70px;
  width: 70px;
  font-size: 2rem;
  background: #c60000;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  translate: -50% 50%;
  position-anchor: --box8;
  position-area: top right;

  transition: 200ms;
}
.box8:hover::before {
  scale: 1;
}