HTML・CSS Writing 2022

border-radius --Round the corners of the border --Introduction to CSS [CSS3 compatible]

To round the corners of the border, set border-radius in the stylesheet (CSS). The size to set is the radius of the rounded corners.

<div style = "border-radius: 10px; border: 1px solid #ddd;">
  Rounded border
</div>

Effect of rounding corners

You can express softness by rounding the corners. You can use it to enclose content or create buttons.

Set rounded corners at the upper left, upper right, lower right, and lower left positions

You can also use border-radius to set rounded corners at the top left, top right, bottom right, and bottom left positions. The order of designation is upper left, upper right, lower right, lower left.

<div style = "border-radius: 10px 10px 10px 10px; border: 1px solid #ddd;">
  Border with rounded corners Designated at four corners
</div>

Set rounded corners only on the upper side

Let's set rounded corners only on the upper side.

<div style = "border-radius: 10px 10px 0 0; border: 1px solid #ddd;">
  Rounded corners only on the upper side
</div>

Set rounded corners only on the bottom side

Let's set rounded corners only on the bottom side.

<div style = "border-radius: 0 0 10px 10px; border: 1px solid #ddd;">
  Rounded corners only on the bottom
</div>

border-radius applies even if there is no border

border-radius contains the name border, but it applies even if there is no border. Let's set the background color and specify border-radius.

<div style = "border-radius: 10px; background: #eef">
  Applies even if there is no border
</div>