ボタンの角を丸くしたい

Question

実現したいこと

• ボタンの枠線の角を丸くすること

前提

ボタンの枠線にグラデーションをソースコードのようにコーディングで実装し、枠線を丸くしようとしてもborder-radius: 2px;が効かず、枠線の角が丸くなってくれません。

発生している問題・エラーメッセージ

ボタンの枠線にグラデーションをこのようなコーディングで実装し、枠線を丸くしようとしてもborder-radius: 2px;が効かず、枠線の角が丸くなってくれません。

該当のソースコード

【html】
<a href=""><input type="button" class="button" value=""></a>

【css】
.button {
    border: 1.5px solid;
    border-image: linear-gradient(90deg, rgba(7,138,98,1) 0%, rgba(0,212,255,1) 100%) 1;
    border-radius: 2px;
}

試したこと

ソースコードの通りです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

border-image を使うと border-radius は無効です。
border-image はもともと画像を指定するものなので、角丸にしたかったらそういう画像を用意せよということなのかもしれません。

かわりに background-image で指定して上手いこと切り抜く手法があります。

.button {
  border: 1.5px solid transparent;
  border-radius: 2px;
  background-image: linear-gradient(gray, gray), linear-gradient(90deg, rgba(7,138,98,1) 0%, rgba(0,212,255,1) 100%);
  background-clip: content-box, border-box;
  background-origin: border-box;
}

Comments

[ryuhosoy2]

解決できました！ありがとうございます！

Answer 2

残念ながら、border-imageは画像をタイル状に並べる形で定義されており、border-radiusとの併用はできません。