Problem with rounded corners
I am trying to develop an app for a mobile. I noticed in the JQueryMobile demos, all of the buttons and fields have nice round corners. However, even when copying and pasting the code directly from one of the demo pages, all of my corners are square. Can someone please help?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>No Decompression Dive Planner</title>
<link href="css/jquery.mobile-1.0a4.1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page" data-theme="b" id="planner">
<div data-role="header" data-backbtn="true">
<h1>Page Title</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="info">Information</a></li>
<li><a href="#" data-icon="gear">Planning</a></li>
<li><a href="#" data-icon="grid">Summary</a></li>
</ul>
</div>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="depth1">Depth:</label>
<input type="text" name="depth1" id="depth1" />
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
</div>
</div>
</body>
</html>