I am trying to implement a rounded corner to a box in my html code.
When I run the file on Chrome, I have the box and all the attribute but the corners won’t round.
I am using Komodo Edit on MAC OSX Lion.
What’s the solution?
Thanks
<!doctype html>
<html lang="en">
<head>
<meta charset=="utf-8" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<div id="box">
<p id="text"> Hello </p>
</div>
</body>
</html>
CSS3:
body {
text-align:center;
}
#box {
display: block;
width: 500px;
margin:50px auto ;
padding:15px ;
text-align:center;
border: 1px solid blue;
background: red;
-webkit-border-radius: 25p;
}
#text {
font:bold 100px Century Gothic;
}
The problem is probably that it should be 25px instead of 25p.
But depending on you Chrome version, you should drop the -webkit- and just use border-radius;