How to Get Only One Rounded Corner with Border-Radius Htc Hack and Msie V:Roundrect

How to add rounded corners to a single side in HTML-CSS

Try like following snippet, for more info take a look here:

.button {
  border: 1px solid #00bfff;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  padding: 20px;
  background: #00bfff;
}

<button type="button" class="button">Button</button>

Why border radius is only working in 1 corner?

It' because you added padding-top: 20px; and padding-left: 20px; on that image class. Remove these and you will see the border radius on all 4 corners:

.cardcontainer {
  width: 300px;
  background-color: grey;
  border-radius: 15px;
  padding-bottom: 10px;
}

.mainimage {
  width: 260px;
  border-radius: 20px;
}

<div class="cardcontainer">
  <img class="mainimage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT57B75xIfuwkTT0FO1EHI0TK65RcvXIwQ5nNoMePOy9FMxaV5FJ72u6bHLf9N8v9OcARk&usqp=CAU" alt="Image">
</div>

How do you get rid of the corners when using border radius

It is because of parent having no border-radius, so you can add same border-radius to .center_content class

.center_content {
 width: 90%;
 margin: auto;
 position: relative;
 background: #FFFFFF;
 border-radius: 15px;
}

or You can also remove the background from this class to achieve the same.

JS Fiddle Sample

Rounded corners not working in IE (.rounded-corners)

Can't you just use:

.ie6 .rounded-corners, .ie7 .rounded-corners, .ie8 .rounded-corners, .ie9 .rounded-corners {
  behavior: url(border-radius.htc);
  border-radius: 4px; /* example */
}

It also assures that it tries also the CSS way of rounding the corner.

How to apply border radius in IE8 and below IE8 browsers?

Option 1

http://jquery.malsup.com/corner/

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT:
Option 6

https://code.google.com/p/jquerycurvycorners/

CSS3 rounded corner without using htc

It's not possible without using VML just with pure CSS in IE<9. The only other way is to use sliced images. I'd recommend, if those rounded corners are not really necessary, just omit them. It's not your fault, if people use outdated browsers.

However I can recommend you css3pie. Take a look at it.

edit:

1. your page has a 404 on css_reset.css
2. Are you sure, your resources have loaded all correctly?
3. you need to include behavior:url(border-radius.htc) in your css (with the correct url of course), but i couldn't find this in your css. Try it and see, if it works.

CSS3 Rounded Corners are not working in IE quirks mode

Quirks mode do not support CSS3, and CSS behaviors were disabled in IE10. You can set header to IE=edge and forget about Quirks mode.

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

Look at http://border-radius.com/.

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

How to include border-radius.htc in MVC architecture to make border-radius work in IE

As I said in my comment, I recommend using CSS3Pie instead of border-radius.htc.

But they both work the same way, so the same question applies to them both.

The answer is to use an absolute URL for the .htc file, rather than a relative one.

This way, as long as you know where your htc file is, you can always refer to it by the same path, and it will always work.

Using relative URLs with htc files does seem to be a recipe for confusion (there's another question here on exactly the same topic right now), but switch to an absolute path and it should just work.

So instead of using

behavior:url(../../css/pie.htc);

...just use

behavior:url(/css/pie.htc);

[EDIT]

If that doesn't work, there are still a number of other things which might cause a HTC file not to work.

The most common one is the content type issue. IE is very fussy with this: a HTC file must be served as text/x-component. If it isn't, then IE will download it, but then completely ignore it.

If this is the case, you can correct it by adding the content type to your server config. The CSS3Pie website has instructions on how to do this. (and also see the same page for other known issues with CSS3Pie, most of which will also apply to border-radius.htc)

---

Related Topics