Asked  7 Months ago    Answers:  5   Viewed   25 times

Does anyone know if/when Internet Explorer will support the "border-radius" CSS attribute?

 Answers

64

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

Tuesday, June 1, 2021
 
francadaval
answered 7 Months ago
69

2021: I recommend using the CSS mask version since the support is pretty good now

You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip:

.white-grad {
    background: 
     linear-gradient(#ccc,#ccc) padding-box, /*this is your grey background*/
     linear-gradient(to right, #9c20aa, #fb3570) border-box;
    color: #313149;
    padding:10px;
    border: 5px solid transparent;
    border-radius:15px;
    display:inline-block;
    margin: 75px 0;
}
<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

CSS border gradient with radius

If you want transparency, you can consider SVG like below:

svg {
  width:200px;
  height:100px;
  margin:10px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
      <linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
         <stop stop-color="#9c20aa" offset="0"/>
         <stop stop-color="#fb3570" offset="1"/>
      </linearGradient>
   </defs>
  <rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>

That you can apply as background:

.white-grad {
    background:url('data:image/svg+xml;utf8,<svg   xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
    color: #313149;
    padding:25px;
    border-radius:15px;
    display:inline-block;
    margin: 75px 0;
}

body {
  background:yellow;
}
<div class="white-grad"> Some text here</div>

<div class="white-grad"> text very loooooooooooong here</div>

And the same way as mask where you can get the gradient outside of the SVG:

.white-grad {
  color: #313149;
  padding: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
  background-size:0 0;
  position: relative;
  z-index: 0;
}

.white-grad::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:inherit;
  background-size:auto;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>') 0 / 100% 100%;
          mask: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>') 0 / 100% 100%;
}

body {
  background: yellow;
}
<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)"> Some text here</div>

<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)"> text very loooooooooooong here</div>

<div class="white-grad" style="background-image:radial-gradient(blue,pink)"> text very<br> loooooooooooong here</div>

CSS border gradient with SVG mask


You can also use it as common element and consider position:absolute to place it around the text:

.white-grad {
  color: #313149;
  padding: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
  position:relative;
  z-index:0;
}
.white-grad > svg {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
}

body {
  background: yellow;
}

.hide {
 height:0;
 width:0;
}
<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>


<div class="white-grad"> 
<svg xmlns="http://www.w3.org/2000/svg">
  <use href="#border" />
</svg>
Some text here</div>

<div class="white-grad"> 
<svg xmlns="http://www.w3.org/2000/svg">
  <use href="#border" />
</svg>
text very loooooooooooong here</div>

Here is a different idea with CSS using mask where you will have transparency and it will also be responsive:

.white-grad {
  color: #313149;
  padding: 10px;
  display: inline-block;
  margin: 75px 0;
  position:relative;
  z-index:0;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding: 5px;
  border-radius: 15px;
  background: linear-gradient(to right, #9c20aa, #fb3570);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;

}
<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

CSS border radius with linear gradient

With CSS variables, we can make it easy to adjust:

.white-grad {
  --b:5px;  /* border width*/
  --r:15px; /* the radius */

  color: #313149;
  padding: calc(var(--b) + 5px);
  display: inline-block;
  margin: 75px 0;
  position:relative;
  z-index:0;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding: var(--b);
  border-radius: var(--r);
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

body {
  background:#f2f2f2;
}
<div class="white-grad"> Some text here</div>

<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>

<div class="white-grad"  style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>

<div class="white-grad"  style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>

CSS gradient mask with border radius

Related question to get a different effect: How do you apply a gradient from outer to inner, only to borders, in CSS?


The above examples cover also the circle shape:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius:50%;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

body {
  background:#f2f2f2;
}
<div class="white-grad"></div>

<div class="white-grad" style="--b:10px;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px;--c:conic-gradient(black,orange,purple)"></div>

CSS circular border with gradient

Related question in case you want to apply an animation to the border: Button with transparent background and rotating gradient border


Also different radius shapes:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius:var(--r,50%);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

body {
  background:#f2f2f2;
}
<div class="white-grad" style="--r:50% 0 50% 50%;"></div>

<div class="white-grad" style="--b:10px;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px;--r:50% 0 0;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px;--r:50% 50% 0 0;--c:conic-gradient(black,orange,purple)"></div>

CSS curved shape with gradient border

and different border thickness:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(#9c20aa, #fb3570));
  padding: var(--b);
  border-radius:var(--r,50%);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

body {
  background:#f2f2f2;
}
<div class="white-grad" style="--b:0 0 20px 20px;--r:50% 0 50% 50%;"></div>

<div class="white-grad" style="--b:10px 0 10px 0;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px 0px 0px 8px;--r:50% 0 0;--c:linear-gradient(40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px 20px 0 20px;--r:50% 50% 0 0;--c:conic-gradient(pink,orange,red,pink)"></div>

Linear gradient curved shape

Tuesday, June 1, 2021
 
kat_indo
answered 7 Months ago
89

Border-radius :

First, you need to understand that the border-radius property takes 2 values. These values are the radii on the X/Y axis of a quarter ellipse defining the shape of the corner.
If only one of the values is set then the second value is equal to the first one. So border-radius: x is equivalent to border-radius:x/x;.

Percentages values

Refering to the W3C specs : CSS Backgrounds and Borders Module Level 3 border-radius property this is what we can read concerning percentage values:

Percentages: Refer to corresponding dimension of the border box.

So border-radius:50%; defines the raddi of the ellipse this way :

  • the radii on the X axis is 50% of the containers width
  • the radii on the Y axis is 50% of the containers height

Border-radius in percentage (%) make an ellipsis

Pixel and other units

Using one value other than a percentage for border radius (em, in, viewport related units, cm...) will always result in an ellipse with the same X/Y radii. In other words, a circle.

When you set border-radius:999px; the radii of the circle should be 999px. But another rule is applied when the curves overlap reducing the radii of the circle to half the size of the smallest side. So in your example it is equal to half the height of the element : 50px.

Border-radius in pixels (px) make a pill shape


For this example (with a fixed size element) you can obtain the same result with both px and percentages. As the element is 230px x 100px, border-radius: 50%; is equivalent to border-radius:115px/50px; (50% of both sides) :

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>
Tuesday, June 1, 2021
 
KouiK
answered 7 Months ago
67

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

  -ms-transform: rotate(10deg);

It is possible that it may not work in the beta version; if not, try downloading the current preview version (preview 7), which is a later revision that the beta. I don't have the beta version to test against, so I can't confirm whether it was in that version or not. The final release version is definitely slated to support it.

I can also confirm that the IE-specific filter property has been dropped in IE9.

[Edit]
People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/ which is useful for testing various CSS3 features in all browsers.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

However I have done some independant tests using -ms-transform:rotate() in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.

Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation

[EDIT]
Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.

The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

...and have it work in IE 6/7/8, without having to use the filter syntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it's using similar syntax to other browsers)

Thursday, June 3, 2021
 
Gregosaurus
answered 7 Months ago
85

The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:

background-image: url(../images/example.jpg);
behavior: url(PIE.htc);

Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:

AddType text/x-component .htc

Hope this helps.

Monday, August 9, 2021
 
dimi
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share