border radius

1/* Set rounded corners with border-radius property */
2
3.class {
4  border-radius: 4px;
5}
6
7.circle {
8  border-radius: 50%;
9}

1#rcorners {
2  border-radius: 25px;
3}

1-webkit-border-radius: 5px;
2-moz-border-radius: 5px;
3border-radius: 5px;

1/*
2	no need for perfixs it's now fully supported
3	see: https://caniuse.com/?search=border-radius
4*/
5
6/* The syntax of the first radius allows one to four values */
7/* Radius is set for all 4 sides */
8border-radius: 10px;
9
10/* top-left-and-bottom-right | top-right-and-bottom-left */
11border-radius: 10px 5%;
12
13/* top-left | top-right-and-bottom-left | bottom-right */
14border-radius: 2px 4px 2px;
15
16/* top-left | top-right | bottom-right | bottom-left */
17border-radius: 1px 0 3px 4px;
18
19/* The syntax of the second radius allows one to four values */
20/* (first radius values) / radius */
21border-radius: 10px / 20px;
22
23/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
24border-radius: 10px 5% / 20px 30px;
25
26/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
27border-radius: 10px 5px 2em / 20px 25px 30%;
28
29/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
30border-radius: 10px 5% / 20px 25em 30px 35em;
31
32/* Global values */
33border-radius: inherit;
34border-radius: initial;
35border-radius: unset;
36