diff options
Diffstat (limited to 'docs/utilities/borders.md')
| -rw-r--r-- | docs/utilities/borders.md | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md new file mode 100644 index 000000000..b47d95c97 --- /dev/null +++ b/docs/utilities/borders.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Borders +group: utilities +--- + +Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. + +## Border-radius + +Add classes to an element to easily round its corners. + +<div class="bd-example bd-example-images"> + <img data-src="holder.js/100x100" class="rounded" alt="Example rounded image"> + <img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image"> + <img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image"> + <img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image"> + <img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image"> + <img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image"> +</div> + +{% highlight html %} +<img src="..." alt="..." class="rounded"> +<img src="..." alt="..." class="rounded-top"> +<img src="..." alt="..." class="rounded-right"> +<img src="..." alt="..." class="rounded-bottom"> +<img src="..." alt="..." class="rounded-left"> +<img src="..." alt="..." class="rounded-circle"> +{% endhighlight %} |
