Border-Radius Utilities

Shipyard’s border-radius utilities are useful for connecting components together.

Sizes .{ screen }:rounded-{ size }

The examples below demonstrate the utility classes at each size.

pill
default
sm
xs
0
.rounded { border-radius: 5px }
.rounded-pill { border-radius: 999px }
.rounded-sm { border-radius: 3px }
.rounded-xs { border-radius: 2px }
.rounded-0 { border-radius: 0 }

Responsive Options .{screen}:rounded-{ direction }

The examples below demonstrate the utility classes on each breakpoint.

<div class="rounded"><!-- all --></div>
<div class="rounded-0"><!-- none --></div>
<div class="rounded rounded-top"><!-- top --></div>
<div class="rounded rounded-bottom"><!-- bottom --></div>
<div class="rounded rounded-left"><!-- left --></div>
<div class="rounded rounded-right"><!-- right --></div>
<div class="rounded rounded-top-left"><!-- top left --></div>
<div class="rounded rounded-top-right"><!-- top right --></div>
<div class="rounded rounded-bottom-left"><!-- bottom left --></div>
<div class="rounded rounded-bottom-right"><!-- bottom right --></div>

All Screens .rounded

all
none
top
bottom
left
right
top left
top right
bottom left
bottom right

Phones .sm:rounded

all
none
top
bottom
left
right
top left
top right
bottom left
bottom right

Tablets .md:rounded

all
none
top
bottom
left
right
top left
top right
bottom left
bottom right

Laptops .lg:rounded

all
none
top
bottom
left
right
top left
top right
bottom left
bottom right

Wide Screens .xl:rounded

all
none
top
bottom
left
right
top left
top right
bottom left
bottom right

Utility CSS

.rounded { border-radius: 5px }
.rounded-0 { border-radius: 0 }
.rounded-xs { border-radius: 2px }
.rounded-sm { border-radius: 3px }
.rounded-md { border-radius: 5px }
.rounded-pill { border-radius: 999px }
.rounded-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0 }
.rounded-left { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.rounded-right { border-top-left-radius: 0; border-bottom-left-radius: 0 }
.rounded-top-left { border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.rounded-top-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.rounded-bottom-left { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
.rounded-bottom-right { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0 }

@media screen and (min-width:  576px) {
  .sm:rounded { border-radius: 5px }
  .sm:rounded-0 { border-radius: 0 }
  .sm:rounded-xs { border-radius: 2px }
  .sm:rounded-sm { border-radius: 3px }
  .sm:rounded-md { border-radius: 5px }
  .sm:rounded-pill { border-radius: 999px }
  .sm:rounded-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .sm:rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0 }
  .sm:rounded-left { border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .sm:rounded-right { border-top-left-radius: 0; border-bottom-left-radius: 0 }
  .sm:rounded-top-left { border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .sm:rounded-top-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .sm:rounded-bottom-left { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .sm:rounded-bottom-right { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0 }
}

@media screen and (min-width:  768px) {
  .md:rounded { border-radius: 5px }
  .md:rounded-0 { border-radius: 0 }
  .md:rounded-xs { border-radius: 2px }
  .md:rounded-sm { border-radius: 3px }
  .md:rounded-md { border-radius: 5px }
  .md:rounded-pill { border-radius: 999px }
  .md:rounded-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .md:rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0 }
  .md:rounded-left { border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .md:rounded-right { border-top-left-radius: 0; border-bottom-left-radius: 0 }
  .md:rounded-top-left { border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .md:rounded-top-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .md:rounded-bottom-left { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .md:rounded-bottom-right { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0 }
}

@media screen and (min-width:  992px) {
  .lg:rounded { border-radius: 5px }
  .lg:rounded-0 { border-radius: 0 }
  .lg:rounded-xs { border-radius: 2px }
  .lg:rounded-sm { border-radius: 3px }
  .lg:rounded-md { border-radius: 5px }
  .lg:rounded-pill { border-radius: 999px }
  .lg:rounded-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .lg:rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0 }
  .lg:rounded-left { border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .lg:rounded-right { border-top-left-radius: 0; border-bottom-left-radius: 0 }
  .lg:rounded-top-left { border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .lg:rounded-top-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .lg:rounded-bottom-left { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .lg:rounded-bottom-right { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0 }
}

@media screen and (min-width:  1200px) {
  .xl:rounded { border-radius: 5px }
  .xl:rounded-0 { border-radius: 0 }
  .xl:rounded-xs { border-radius: 2px }
  .xl:rounded-sm { border-radius: 3px }
  .xl:rounded-md { border-radius: 5px }
  .xl:rounded-pill { border-radius: 999px }
  .xl:rounded-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .xl:rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0 }
  .xl:rounded-left { border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .xl:rounded-right { border-top-left-radius: 0; border-bottom-left-radius: 0 }
  .xl:rounded-top-left { border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .xl:rounded-top-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  .xl:rounded-bottom-left { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
  .xl:rounded-bottom-right { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0 }
}