Did anyone work with individually rounded corners in CSS3? Border-radius works fine (delivers 4 rounded corners), but -moz-border-radius-topright / border-top-right-radius does not work. The strange thing is that -moz-border-radius-topleft / border-top-left-radius works fine! So I can get a rounded corner only in the top left, but not a rounded corner only in the top right...

 

My code is below. This code delivers a box that only has one rounded corner (top-left)... This behaviour is consistent across Chrome, Firefox and Opera.

 

Any ideas?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Rounded corners</title>

<style type="text/css">

.round {

-moz-border-radius-topleft: 15 px;

border-top-left-radius: 15px;

-moz-border-radius-topright: 15 px;

border-top-right-radius: 15 px;

border: 1px solid #333;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

<div class="round"></div>

</body>

</html>

 

.round {

-moz-border-radius-topleft: 15 px;

border-top-left-radius: 15px;

-moz-border-radius-topright: 15 px;

border-top-right-radius: 15 px;

border: 1px solid #333;

width: 100px;

height: 100px;

}

 

 

you have a space between 15 and px, remove the space so its 15px and you should be fine

 

Pat

Pat, oops, thanx...

Pat, oops, thanx...