CSSで要素を角丸にする(border-radius)

要素の角を丸くしたいときは border-radius を指定する。ボタンを丸くしたいときなど。

border-radius: 4px;

border-radius を 4px にすると半径 4px の四分円がふちどられる。

メモ

iPhone などの iOS ではいくつかの要素がデフォルトで角丸になっている。後で css の打ち消しコードを書かないためにも、最初に border-radius を 0 に設定する。

a,
body,
button,
div,
form,
h1,
h2,
html,
img,
input,
li,
p,
span,
table,
td,
textarea,
tr,
ul {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  border-radius: 0;
  color: #666;
  font: 0px avenir, 'Helvetica Neue', Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, Arial, sans-serif;
  margin: 0;
  outline: 0;
  padding: 0;
}

広告

広告

広告

技術

言語

高校理系

高校文系

中学

小学

エッセイ

姉妹サイト