Skip to content

Instantly share code, notes, and snippets.

@coliff
Last active January 10, 2023 11:56
Show Gist options
  • Save coliff/5618329 to your computer and use it in GitHub Desktop.
Save coliff/5618329 to your computer and use it in GitHub Desktop.
Bootstrap 3 - PIECSS to quickly add border-radius to IE6,IE7,IE8 with CSS3 PIE (http://css3pie.com/). Be sure to add it as a conditional stylesheet for IE8 and lower.
.img-circle{behavior:url(/scripts/PIE.htc)}
.img-rounded{behavior:url(/scripts/PIE.htc)}
.img-thumbnail{behavior:url(/scripts/PIE.htc)}
.table-bordered{behavior:url(/scripts/PIE.htc)}
select,textarea,input,code,pre,kbd,pre{behavior:url(/scripts/PIE.htc)}
.input-group-addon{behavior:url(/scripts/PIE.htc)}
.btn{behavior:url(/scripts/PIE.htc)}
.dropdown-menu{behavior:url(/scripts/PIE.htc)}
.form-control{behavior:url(/scripts/PIE.htc)}
.panel{behavior:url(/scripts/PIE.htc)}
.well{behavior:url(/scripts/PIE.htc)}
.nav-tabs > li > a{behavior:url(/scripts/PIE.htc)}
.nav-pills > li > a{behavior:url(/scripts/PIE.htc)}
.navbar{behavior:url(/scripts/PIE.htc)}
.navbar-nav > li > a{behavior:url(/scripts/PIE.htc)}
.navbar-toggle{behavior:url(/scripts/PIE.htc)}
.navbar-toggle .icon-bar{behavior:url(/scripts/PIE.htc)}
.breadcrumb{behavior:url(/scripts/PIE.htc)}
.pagination{behavior:url(/scripts/PIE.htc)}
.pager li > a,.pager li > span{behavior:url(/scripts/PIE.htc)}
.modal-content{behavior:url(/scripts/PIE.htc)}
.tooltip-inner{behavior:url(/scripts/PIE.htc)}
.popover{behavior:url(/scripts/PIE.htc)}
.popover-title{behavior:url(/scripts/PIE.htc)}
.alert{behavior:url(/scripts/PIE.htc)}
.thumbnail,.img-thumbnail{behavior:url(/scripts/PIE.htc)}
.label{behavior:url(/scripts/PIE.htc)}
.badge{behavior:url(/scripts/PIE.htc)}
.progress{behavior:url(/scripts/PIE.htc)}
.carousel-indicators li{behavior:url(/scripts/PIE.htc)}
.jumbotron{behavior:url(/scripts/PIE.htc)}
@uschmelzer
Copy link

Typo?
Wrong: .accordian-group
Right: .accordion-group
Cheers
uwe

@coliff
Copy link
Author

coliff commented Feb 11, 2014

Well spotted @uweschmelzer! I've removed that now as accordion-group has been removed from Bootstrap 3.

@julienwa
Copy link

Hi,

Thanks for this gist but it doesn't work for me.

Here you can find my website in development :
http://dev.stargraf.com/interiale/lot1/

In IE8 any of the above class doesn't work. (example border radius won't work).

Could you help me ? Any idea ?

Best regards.

@coliff
Copy link
Author

coliff commented Feb 25, 2014

Hi @julienwangchang - I think its because your URL for the PIE.htc is relative in your CSS. That doesn't work.
It should be like this
behavior:url(/scripts/PIE.htc)

See here for info: http://css3pie.com/documentation/known-issues/

@Hunter-WebDev
Copy link

Would it not be easier to combine all the selectors and just declare it once?

@ElManouche
Copy link

I have forked your file and combined the selectors. I think this is better.
Here is the link: https://gist.github.com/ElManouche/ba9356819543065a2b68

@elmota
Copy link

elmota commented Aug 4, 2014

you can do this as well:
.img-circle, .img-rounded..., .jumbotron { behavior:url(/scripts/PIE.htc) }

✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment