ボーダー (border) [CSS]

ボーダー

border プロパティによって境界線の描画を一括で設定する。border-width、border-style、border-color プロパティによって太さ、種類、色を個別に指定することができる。また、border-radius によって角丸の半径を指定する。

• border
• border-color
• border-style
• border-width
• border-radius

使い方

参考：

border | HTML クイックリファレンス

スタイル (border-style)

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

参考：

border-style | HTML クイックリファレンス

border-style | MDN

border-color

参考：

border-color | MDN

border-width

参考：

border-width | MDN

border-radius

参考：

今さら聞けない!? CSS の border-radius で様々な角丸に挑戦！ | Web クリエイターボックス

border-radius | HTML クイックリファレンス

border-radius | MDN

Rounded Corners | W3Schools

部分的に表示／非表示にする

• border-top: none;
• border-bottom: none;
• border-left: none;
• border-right: none;

全体に border で一括指定した後で、border-xx に none を指定する。

.border-bottom-right {
    border: 1px solid #777;
    border-top: none;
    border-left: none;
}

参考：

border で一部の線を消す方法 | マンガでわかるホームページ作成

角を切り落とす

参考：

Cut button corner using CSS – Stack Overflow

Cut Corners using CSS – Stack Overflow

How to cut a corner with CSS when background image is necessary? – Stack Overflow