This module controls borders and border radii.
Borders
Add borders with these border utilities.
.border
.border-top
.border-right
.border-bottom
.border-left
<div class="p1 m1 border">.border</div>
<div class="p1 m1 border-top">.border-top</div>
<div class="p1 m1 border-right">.border-right</div>
<div class="p1 m1 border-bottom">.border-bottom</div>
<div class="p1 m1 border-left">.border-left</div>Remove borders with the .border-none utility.
<input type="text" class="border-none" placeholder=".border-none" />Border Radii
Utility styles for border radii can be used to style images and other elements.
<img class="rounded" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="circle" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-top" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-right" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-bottom" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-left" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />The .not-rounded utility can be used to override default radii.
This is useful for things like input and button groups.
<button class="btn btn-primary not-rounded">Not Rounded</button>CSS Source
.border {
border-style: solid;
border-width: var(--border-width);
border-color: var(--border-color);
}
.border-top {
border-top-style: solid;
border-top-width: var(--border-width);
border-top-color: var(--border-color);
}
.border-right {
border-right-style: solid;
border-right-width: var(--border-width);
border-right-color: var(--border-color);
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: var(--border-width);
border-bottom-color: var(--border-color);
}
.border-left {
border-left-style: solid;
border-left-width: var(--border-width);
border-left-color: var(--border-color);
}
.border-none { border: 0 }
.rounded { border-radius: var(--border-radius) }
.circle { border-radius: 50% }
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 }
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 }
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) }
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) }
.not-rounded { border-radius: 0 }
15 Rules
15 Selectors
78 Declarations
69 Properties