corner-shape example

by Julien Roche

HTML

<button>First Action</button>
<button>Second Action</button>
<button>Third Action</button>
<button>Last Action</button>

CSS

button {
  border: 1px solid black;
  /*border-radius: 1rem 0 / 3rem 0;*/
  border-top-left-radius: 1rem 3rem;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 1rem 3rem;
  border-bottom-left-radius: 0px;
  corner-shape: bevel round;
  display: inline-block;
  margin-left: -1.25rem;
  padding: 1rem;
  transition: background-color 0.25s ease, border-color 0.25s linear, color 0.25s ease;
  will-change: background-color, border-color, color;

  &:hover {
    background-color: gray;
    border-color: lightgrey;
    color: white;
    cursor: pointer;
  }

  &:first-of-type {
    border-top-left-radius: 1rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 1rem 3rem;
    border-bottom-left-radius: 1rem;
    corner-shape: round bevel bevel round;
    margin-left: 0px;
  }

  &:last-of-type {
    border-top-left-radius: 1rem 3rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 0px;
    corner-shape: bevel round round bevel;
  }
}