CSSでボタンのボーダーサイズを縮小する方法

.button {
  border-width: 1px; /* ボーダーサイズを1ピクセルに設定 */
}

この例では、ボタンのボーダーサイズを1ピクセルに設定しています。必要に応じて値を調整してください。

ボーダースタイルの指定: ボーダーサイズを変更する代わりに、ボーダースタイルを使用してボタンの見た目を変更する方法もあります。以下のようにCSSのborder-styleプロパティを使用します。

.button {
  border-style: solid; /* ボーダースタイルを実線に設定 */
  border-width: 1px; /* ボーダーサイズを1ピクセルに設定 */
}

この例では、ボーダースタイルを実線に設定し、ボーダーサイズを1ピクセルに設定しています。他のボーダースタイル（dashed、dottedなど）を試してみることもできます。

クラスの追加: 特定のボタンにのみボーダーサイズを縮小したい場合は、クラスを追加してCSSでスタイルを指定する方法もあります。例えば、以下のようにHTMLのボタンに"small-border"クラスを追加し、CSSでスタイルを指定します。

<button class="button small-border">ボタン</button>

.small-border {
  border-width: 1px; /* ボーダーサイズを1ピクセルに設定 */
}

この例では、"small-border"クラスが追加されたボタンのみボーダーサイズが縮小されます。

これらはボタンのボーダーサイズを縮小するためのシンプルで簡単な方法です。必要に応じて値やスタイルを調整して、デザインに適したボタンを作成してください。