Rounded corners -- only works if I put border around element

HTML & CSS
1

I just discovered an interesting thing about rounded corners: they only work if you have a border!!

I had never realized this…

I have a div with gradient bg, and no border… can’t put border around it b/c of the gradient bg… so how do I do the rounded corners? is there a way other than the typical

-moz-border-radius-bottomleft:7px; border-bottom-left-radius:7px;

thank you…

2

Hi,

Which browsers are you having problems with and what is your full css/html code.

You don’t need a border for border-radius to work.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div{
background-image: -o-linear-gradient(bottom, rgb(165,80,94) 15%, rgb(198,112,123) 58%, rgb(238,146,160) 79%);
background-image: -moz-linear-gradient(bottom, rgb(165,80,94) 15%, rgb(198,112,123) 58%, rgb(238,146,160) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(165,80,94) 15%, rgb(198,112,123) 58%, rgb(238,146,160) 79%);
background-image: -ms-linear-gradient(bottom, rgb(165,80,94) 15%, rgb(198,112,123) 58%, rgb(238,146,160) 79%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.15, rgb(165,80,94)),
	color-stop(0.58, rgb(198,112,123)),
	color-stop(0.79, rgb(238,146,160))
);
background-image: linear-gradient(bottom, rgb(165,80,94) 15%, rgb(198,112,123) 58%, rgb(238,146,160) 79%);
	width:200px;
	height:200px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

</style>
</head>

<body>
<div></div>
</body>
</html>
3

thank your for your response… two comments:

  1. I meant an actual image (repeat-x) for gradient bg… :wink:

  2. so you can say

background-image: -o-linear-gradient .... etc..

and it creates the gradient “image”??? hmmm…

b/c this is how I have done it in the past:


ul#tabNav li a { /* cross-browser gradients:  */ 
				/* mozilla: */  background: -moz-linear-gradient(top,  #FFF,  #d9d9d9);
				/* webkit: */  background-image: -webkit-linear-gradient(#FFF,  #d9d9d9);
				/* IE8:  */   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='white', endColorstr='#d9d9d9')";
				/* can't find one that works w/IE9  */

thank you…

4

Yes it works with a background image as well. I just use the gradient filter so you could test it out as the gradient filter is in effect a background image made by the browser.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div{
background:url(images/test.gif) repeat-x 0 0;
	width:200px;
	height:200px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

</style>
</head>

<body>
<div></div>
</body>
</html>
  1. so you can say
background-image: -o-linear-gradient .... etc..

and it creates the gradient “image”??? hmmm…

b/c this is how I have done it in the past:


ul#tabNav li a { /* cross-browser gradients:  */ 
				/* mozilla: */  background: -moz-linear-gradient(top,  #FFF,  #d9d9d9);
				/* webkit: */  background-image: -webkit-linear-gradient(#FFF,  #d9d9d9);
				/* IE8:  */   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='white', endColorstr='#d9d9d9')";
				/* can't find one that works w/IE9  */

thank you…

I’m not sure what you are asking there exactly but I wouldn’t usually use the IE filters as they cause too many problems. You can use svg for IE9 and just copy and paste from the ultimate gradient generator.