Cross browser border-radius SASS mixin with varargs
Apr 27, 2015 :: 22:59
Few days ago I needed to create style sheets with many rounded boxes,
where different corners had to be rounded differently (think about
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:
Gergely Polonkai is a systems engineer of a telco company, and
also a freelancer self- and software developer.
He is learning about different IT subjects since the late
1990s. These include web development, application building,
systems engineering, IT security and many others. He also dug his
nose deeply into free software, dealing with different types of
Linux and its applications,
while also writing and contributing to some open source projects.
On this site he is writing posts about different stuff he faces
during work (oh my, yet another IT solutions blog), hoping they
can help others with their job, or just to get along with their
brand new netbook that shipped with Linux.
“I believe one can only achieve success if they follow their own
instincts and listen to, but not bend under others’ opinions. If
you change your course just because someone says so, you are
following their instincts, not yours.”