[object Object]

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)

Sorry, your owser does not support inline SVG.

radius-t(lg)

Sorry, your owser does not support inline SVG.

radius-tl(lg)

Sorry, your owser does not support inline SVG.

radius-tr(lg)

Sorry, your owser does not support inline SVG.

radius-b(lg)

Sorry, your owser does not support inline SVG.

radius-bl(lg)

Sorry, your owser does not support inline SVG.

radius-br(lg)

Sorry, your owser does not support inline SVG.

radius(pill)

Sorry, your owser does not support inline SVG.

radius(circle)

Sorry, your owser does not support inline SVG.

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)

Sorry, your owser does not support inline SVG.

radius(pill)

Sorry, your owser does not support inline SVG.

radius(circle)

Sorry, your owser does not support inline SVG.

radius(circle)

Sorry, your owser does not support inline SVG.

!important

Setting the !important property on your rules is as simple as adding another value to your your mixin - radius(lg, true).