<form>
  <p><input type="text"></p>
  <p><input class="radius-percent-0" type="submit" value="送信する"></p>
  <p><input class="radius-percent-10" type="submit" value="送信する"></p>
  <p><input class="radius-percent-20" type="submit" value="送信する"></p>
  <p><input class="radius-percent-30" type="submit" value="送信する"></p>
  <p><input type="text"></p>
  <p><input class="radius-pixel-0" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-10" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-20" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-30" type="submit" value="送信する"></p>
</form>


.radius-percent-0 {
  border-radius: 0%;
}

.radius-percent-10 {
  border-radius: 10%;
}

.radius-percent-20 {
  border-radius: 20%;
}

.radius-percent-30 {
  border-radius: 30%;
}

.radius-pixel-0 {
  border-radius: 0px;
}

.radius-pixel-10 {
  border-radius: 10px;
}

.radius-pixel-20 {
  border-radius: 20px;
}

.radius-pixel-30 {
  border-radius: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.