border-radius
Utilities for controlling the border radius of an element.
| Utility | Styles |
|---|---|
rounded[0] | border-radius: 0px; |
rounded.full | border-radius: calc(infinity * 1px); |
rounded[*<value>*] | border-radius: var(*<custom-property>*); |
rounded.s.none | border-start-start-radius: 0;border-end-start-radius: 0px; |
rounded.s.full | border-start-start-radius: calc(infinity * 1px);border-end-start-radius: calc(infinity * 1px); |
rounded.s[*<value>*] | border-start-start-radius: var(*<custom-property>*);border-end-start-radius: var(*<custom-property>*); |
rounded.e.none | border-start-end-radius: 0;border-end-end-radius: 0px; |
rounded.e.full | border-start-end-radius: calc(infinity * 1px);border-end-end-radius: calc(infinity * 1px); |
rounded.e[*<value>*] | border-start-end-radius: var(*<custom-property>*);border-end-end-radius: var(*<custom-property>*); |
rounded.t.none | border-top-left-radius: 0;border-top-right-radius: 0px; |
rounded.t.full | border-top-left-radius: calc(infinity * 1px);border-top-right-radius: calc(infinity * 1px); |
rounded.t[*<value>*] | border-top-left-radius: var(*<custom-property>*);border-top-right-radius: var(*<custom-property>*); |
rounded.r.none | border-top-right-radius: 0;border-bottom-right-radius: 0px; |
rounded.r.full | border-top-right-radius: calc(infinity * 1px);border-bottom-right-radius: calc(infinity * 1px); |
rounded.r[*<value>*] | border-top-right-radius: var(*<custom-property>*);border-bottom-right-radius: var(*<custom-property>*); |
rounded.b.none | border-bottom-right-radius: 0;border-bottom-left-radius: 0px; |
rounded.b.full | border-bottom-right-radius: calc(infinity * 1px);border-bottom-left-radius: calc(infinity * 1px); |
rounded.b[*<value>*] | border-bottom-right-radius: var(*<custom-property>*);border-bottom-left-radius: var(*<custom-property>*); |
rounded.l.none | border-top-left-radius: 0;border-bottom-left-radius: 0px; |
rounded.l.full | border-top-left-radius: calc(infinity * 1px);border-bottom-left-radius: calc(infinity * 1px); |
rounded.l[*<value>*] | border-top-left-radius: var(*<custom-property>*);border-bottom-left-radius: var(*<custom-property>*); |
rounded.ss[0] | border-start-start-radius: 0px; |
rounded.ss.full | border-start-start-radius: calc(infinity * 1px); |
rounded.ss[*<value>*] | border-start-start-radius: var(*<custom-property>*); |
rounded.se[0] | border-start-end-radius: 0px; |
rounded.se.full | border-start-end-radius: calc(infinity * 1px); |
rounded.se[*<value>*] | border-start-end-radius: var(*<custom-property>*); |
rounded.ee[0] | border-end-end-radius: 0px; |
rounded.ee.full | border-end-end-radius: calc(infinity * 1px); |
rounded.ee[*<value>*] | border-end-end-radius: var(*<custom-property>*); |
rounded.es[0] | border-end-start-radius: 0px; |
rounded.es.full | border-end-start-radius: calc(infinity * 1px); |
rounded.es[*<value>*] | border-end-start-radius: var(*<custom-property>*); |
rounded.tl[0] | border-top-left-radius: 0px; |
rounded.tl.full | border-top-left-radius: calc(infinity * 1px); |
rounded.tl[*<value>*] | border-top-left-radius: var(*<custom-property>*); |
rounded.tr[0] | border-top-right-radius: 0px; |
rounded.tr.full | border-top-right-radius: calc(infinity * 1px); |
rounded.tr[*<value>*] | border-top-right-radius: var(*<custom-property>*); |
rounded.br[0] | border-bottom-right-radius: 0px; |
rounded.br.full | border-bottom-right-radius: calc(infinity * 1px); |
rounded.br[*<value>*] | border-bottom-right-radius: var(*<custom-property>*); |
rounded.bl[0] | border-bottom-left-radius: 0px; |
rounded.bl.full | border-bottom-left-radius: calc(infinity * 1px); |
rounded.bl[*<value>*] | border-bottom-left-radius: var(*<custom-property>*); |