Houn

2021.07.31

Website develop

【CSS】Create rounded corners by applying border-radius only in specific directions (up, down, left, right).

This is a way to apply border-radius only to the top, left, top-right, etc. to round off the corners.

You can specify one direction at a time like this.


border-radius: 10px 20px 30px 40px; 
/* upper left・upper right・lower right・lower left */

In the case of margin and padding, you can specify the values in clockwise order, starting from the top, right, bottom and left.

Example 1: Specify only the bottom right corner

If you want to make only the bottom right corner rounded, you can do this.


border-radius: 0 0 0 32px; 

However, if you only want to use one direction, the following is smarter.


border-bottom-right-radius: 32px;

『border-(vertical)-(beside)-radius』It can be specified as a property name.

It’s like “margin-bottom”.

Example 2: Specify on the diagonal

Also, if you write like this


border-radius: 32px 0;"

You can also specify a diagonal line, such as top left and bottom right.

It’s an abbreviated way of writing, like margin: 40px 0;.

Share on SNSシェア

Related 関連記事

お問い合わせ