# Border Radius Mixins
The mixins will pull the values based on the $border-radiuses variable in the _variables.scss file at the root of the /00_Abstracts directory.
The mixins use an abbreviation syntax that is designed for developer efficiency. If you find that they are not to you're liking, you are always free to change them to something that works better for you, but before you do, give them a chance. You may like them.
| Abbreviation | Meaning |
|---|---|
| radius(lg) | border radius - all corners (large) |
| radius-t(lg) | border radius - top (large) |
| radius-tl(lg) | border radius - top left (large) |
| radius-tr(lg) | border radius - top right (large) |
| radius-b(lg) | border radius - bottom (large) |
| radius-bl(lg) | border radius - bottom left (large) |
| radius-br(lg) | border radius - bottom right (large) |
| radius(pill) | border radius (pill) |
| radius(circle) | border radius (circle) |
# Parameters
| Name | Type | Default Value | Description |
|---|---|---|---|
| size | string | required | the size of the border radius based on the border-radiuses values defined in the variables file |
| important | bool | false | determines whether or not the !important property is added to the css rule |
# Example
radius(lg)
radius-t(lg)
radius-tl(lg)
radius-tr(lg)
radius-b(lg)
radius-bl(lg)
radius-br(lg)
radius(pill)
radius(circle)
NOTE
For circle and pill, as the aspect ratios change for the object you are adding border radiuses to, you may get different results than you expected.
See how the two compare when they are be added to a square rather than a rectangle:
radius(pill)
radius(pill)
radius(circle)
radius(circle)
# !important
Setting the !important property on your rules is as simple as adding another value to your your mixin - radius(lg, true).