CSSのcorner-shapeプロパティは、border-radiusで定義された角の領域に対して、「どのような形状で処理するか」を指定できるプロパティです。 これまで、角の形状を変えるデザインを実現するには、用途に応じて複数の手法を組み合わせる必要がありました。 丸くする:border-radius 斜めに切る:疑似要素やclip-path 内側にえぐる:SVGやCSS Masking(mask-image) たとえば「角を斜めに切り落としたボタン」を作る場合、clip-pathで多角形を指定する方法があります。 /* 四隅を斜めに切り落とす */ button { clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10p