GorangoCSS Docs
Project HomeGithub
Search
⌃K
Links
Comment on page

Rounded Border

Since 1.7.0

Class

.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}
.rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

Code Sample

.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}

<div class="rounded--1 bg--gainsboro pa--2">.rounded--1</div>
<div class="rounded--5 bg--gainsboro pa--2">.rounded--5</div>
<div class="rounded--10 bg--gainsboro pa--2">.rounded--10</div>
<div class="rounded--full bg--gainsboro pa--2">.rounded--full</div>

.rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

<div class="rounded--t--10 bg--gainsboro pa--2">.rounded--t--10</div>
<div class="rounded--r--10 bg--gainsboro pa--2">.rounded--r--10</div>
<div class="rounded--b--10 bg--gainsboro pa--2">.rounded--b--10</div>
<div class="rounded--l--10 bg--gainsboro pa--2">.rounded--l--10</div>

Variable

Class
Properties
.rounded--1
border-radius: 1px
.rounded--2
border-radius: 2px
.rounded--3
border-radius: 3px
.rounded--4
border-radius: 4px
.rounded--5
border-radius: 5px
.rounded--6
border-radius: 6px
.rounded--7
border-radius: 7px
.rounded--8
border-radius: 8px
.rounded--9
border-radius: 9px
.rounded--10
border-radius: 10px
Previous
Border Properties
Next - Utilities
Margin
Last modified 3yr ago