Displaying two rounded corners in IE

TL;DR Nothing fancy, but this might save you some time if you’re using CSS3PIE and SASS.

Four rounded corners were easy enough to do using CSS3, save for IE, of course.

I already had a SASS mixin:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

A GIS for rounded corners in IE suggested CSS3PIE.

After time wasted trying different configurations, I learned to always use an absolute link for PIE.htc.

I first tried

behavior: url(PIE.htc);

and

behavior: url(css/PIE.htc);

with no success.

Only

behavior: url(/PIE.htc);

worked.

I needed one box to round only two corners, so I copied this CSS from border-radius.com.

-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

CSS3PIE didn’t support this format, but did support the shorthand code.

border-radius: 0 0 8px 8px;

So I added a mixin to handle specific corners and made CSS3PIE happy.

@mixin border-radius-specific($radius1, $radius2, $radius3, $radius4) {
  -webkit-border-radius: $radius1, $radius2, $radius3, $radius4;
     -moz-border-radius: $radius1, $radius2, $radius3, $radius4;
          border-radius: $radius1, $radius2, $radius3, $radius4;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s