GorangoCSS Docs
Project HomeProject Repo
  • Overview
  • Changelog
  • Contributing
    • Contributing to GorangoCSS
    • Contributing to the Docs
  • Layouts
    • Hero
    • Columns
    • Flex
  • Components
    • Buttons
    • Notice
    • Card
    • Highlight
    • Float
    • Badge
  • Utilities
    • Background Color
    • Border
      • Border Properties
      • Rounded Border
    • Margin
    • Padding
Powered by GitBook
LogoLogo

© Kawanua Indo Digital

On this page
  • Class
  • Code Sample
  • Variable

Was this helpful?

  1. Utilities
  2. Border

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

PreviousBorder PropertiesNextMargin

Last updated 4 years ago

Was this helpful?