ボーダー

border プロパティによって境界線の描画を一括で設定する。border-widthborder-styleborder-color プロパティによって太さ、種類、色を個別に指定することができる。また、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-xxnone を指定する。

.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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA