脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

border-radiusで角丸にする/角丸を無効化する

border-radiusの使い方

ボタンやformの角丸等はこれで対応できます
逆にbootstrap等でdefaultで角丸になっているいるものも無効化できます
f:id:portaltan:20160106135346g:plain

Example

border-radius: 0;

f:id:portaltan:20160106134703p:plain

  • 角が90度になります
  • 丸みは一切ありません

border-radius: 100px;

f:id:portaltan:20160106135233p:plain

  • 丸みが出てきます

border-radius: 100px;

f:id:portaltan:20160106135126p:plain

  • 数値をあげていくとより丸みをもっていきます

その他

以下のように四角い画像を丸くすることも可能です
f:id:portaltan:20160106150023j:plain
これにborder-radius:100px;を指定すると
f:id:portaltan:20160106150216p:plain
丸くなってその範囲内だけ表示する