Rounded corners only at some corners in css

Question

Is it possible to create a rounded corner using css, where I get rounding only at some specific corner, and not at all corners? I am currently using:

-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; 

But I see no way to indicate the top left or some other corner. I want the rest of the corners to remain square.

Answer 1

You can do it like

 border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */ 

The above syntax works like a fan, starting at 5px and ending at 20px , just by adding the diagram below, the arrow there shows the beginning of the short string syntax stream.

Demo

To specify a specific radius, you can use a property like

 border-top-left-radius: 10px; 

Which is equivalent

 border-radius: 10px 0 0 0; 

Answer 2

You can use: DEMO

• radius border - upper left
• radius border - upper right
• radius border lower left

• border radius-lower right

   border-radius: 5px 0 10px 0; 

  

For more information, visit this website.

Answer 3

Try using: -

 border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px 

these 4 values ​​represent different angles in a clockwise direction.

Answer 4

 .rounded-corners { -moz-border-radius: 20px; -webkit-border-radius: 20px;\ border-radius: 20px; } 

Changes can be made as follows:

  -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; 

Answer 5

It is very simple to create a rounded border by specifying a specific angle: -

If you want to create the upper left corner rounded and all other corners straight, use this code instead of "border-radius" and specify the desired value in pixels

 border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; 

You can do this in another way: -

border-radius: 10px 0px 0px 0px;

where the first is in the upper left corner (10px), the second is for the upper right corner (0px), the third is for the lower right corner (0px), and the fourth is for the lower left corner (0px).

only the top left corner will be rounded, and all other corners will remain the same