Border-radius: length value composed of floating point numbers and unit identifiers.
Border-top-left-radius --- top left
Border-top-right-radius --- top right
Border-bottom-right-radius --- bottom right
Border-bottom-left-radius --- bottom left
Note: The first value is the horizontal radius. If it is 0, it is a right angle.
Circle
The code is as follows: |
Copy code |
Border-radius: 50px; width: 100px; height: 100px; border: 1px solid red; |
Halfcircle
The code is as follows: |
Copy code |
Border-radius: 100px 0px 0px 100px; height: 100px; width: 50px; |
1/4
The code is as follows: |
Copy code |
Border-radius: 100px; width: 100px; height: 100px; border: 1px solid red; |
Rounded corner
The code is as follows: |
Copy code |
Border-radius: 10px; height: 60px; width: 100px; |
Arc shape
The code is as follows: |
Copy code |
Border-radius: 100px 0px 0px; height: 100px; width: 100px; border-left: 1px solid red; border-top: 1px solid red;
|