CSSを使用して上部の角丸を実現する方法

方法1: border-radius プロパティを使用する方法

.rounded-top {
  border-radius: 10px 10px 0 0;
}

方法2: clip-path プロパティを使用する方法

.rounded-top {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

方法3: ::before または ::after 疑似要素を使用する方法

.rounded-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background-color: #f1f1f1;
}

方法4: overflow: hidden プロパティを使用する方法

.rounded-top {
  overflow: hidden;
}
.rounded-top > * {
  margin-top: -10px;
  padding-top: 10px;
}

これらの方法を使えば、上部の角丸を実現することができます。選択した方法に応じて、適切なクラス名やセレクタを使用してください。また、必要に応じて他のスタイルを追加することもできます。

以上が、CSSを使用して上部の角丸を実現する方法についての解説です。これらの方法を活用して、ウェブサイトやアプリケーションで角丸のデザインを実装してみてください。