Border radius problem

HTML & CSS
1

Hi,

I am trying to create a menu with rounded corners and I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
	body {
		background: #791919;
		font-weight: bold;
		font-family: Arial;
		text-shadow: 1px 1px 1px #000;
	}
	body a {
		text-decoration: none;
	}
	.nav {
		padding: 8px 0;
		color: #f9f2e1;
		background: #6e7044;
	}
	.nav a {
		padding: 8px;
		background: #828800;
		color: #f9f2e1;
		border-top: 2px solid #dcb94f;
		border-right: 2px solid #dcb94f;
		border-bottom: 2px solid#dcb94f;
		border-radius: 0.75em;
	}
	.box {
		margin: 6px 8px;
		border: 2px solid #dcb94f;
		border-radius:0.75em
	}
	</style>
	<title>Test</title>
</head>
<body>
	<div class="nav box"><a href="/">Home</a>* About Us</div>
</body>
</html>

The left side of the Home page does not look nice, especially on a mobile browser. How can I make it look perfectly rounded?

2

Use images instead of border radius. It’s not supported everywhere (as you see in mobile).

To get it rounded more you should just have to increase the values. Although to also solve the mobile issue, I’d just use an image :).

3

Ryan, thanks for the suggestion. I would rather have a couple of pixels displaying wrong instead of having more images on my mobile site because of loading speeds.

4

You can use following css3 round border proprieties for different browser.

Firefox - Chrome - Safari
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;

But this code supported but IE9 only. So you can use image too and supported for all the browser here
…kalsey.com/2003/07/rounded_corners_in_css/