gergely
/
gergelypolonkai-web-jekyll
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
school-fallacies-post
sqla-i18n-post
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
gergelypolonkai-web-jekyll/content/blog/2015-04-28-cross-browser-bo...

2.4 KiB
Raw Permalink Blame History Unescape Escape

Cross browser border-radius SASS mixin with varargs

date

2015-04-27T22:59:56Z

category

blog

tags

css,sass

url

blog/2015/4/28/cross-browser-border-radius-sass-mixin-with-varargs.html

save_as

blog/2015/4/28/cross-browser-border-radius-sass-mixin-with-varargs.html

status

published

author

Gergely Polonkai

Few days ago I needed to create style sheets with many rounded boxes, where different corners had to be rounded differently (think about Bootstrap’s button groups).

CSS has this nifty shorthand to specify border width in one line, like with border-width: 1px 2px 3px 4px, but it lacks the same for border-radius. So I decided to create something similar using Sass mixins with dynamic parameters. Another nice feature you get using the border-width shorthand is that you can specify less than four parameters, and the values will be applied on different sides of your box, so in the end all side will have the whole border-width set.

I wanted to achieve the same for my border-radius mixin, although I could not start specifically with the top side. I decided to go with the top right corner for the first parameter, while trying to keep a sane repeating pattern. Here is the result:

=border-width($t, $r: $t, $b: $t, $l: $r)
  border-top-width: $t
  border-right-width: $r
  border-bottom-width: $b
  border-left-width: $l

=border-top-right-radius($value)
  border-top-right-radius: $value
  -moz-border-top-right-radius: $value
  -webkit-border-top-right-radius: $value

=border-top-left-radius($value)
  border-top-left-radius: $value
  -moz-border-top-left-radius: $value
  -webkit-border-top-left-radius: $value

=border-bottom-right-radius($value)
  border-bottom-right-radius: $value
  -moz-border-bottom-right-radius: $value
  -webkit-border-bottom-right-radius: $value

=border-bottom-left-radius($value)
  border-bottom-left-radius: $value
  -moz-border-bottom-left-radius: $value
  -webkit-border-bottom-left-radius: $value

=border-radius($tr, $br: $tr, $bl: $br, $tl: $tr)
  +border-top-right-radius($tr)
  +border-bottom-right-radius($br)
  +border-bottom-left-radius($bl)
  +border-top-left-radius($tl)