Cross Browser Compatable Rounded Corners with CSS3 & jQuery
May 10th, 2010 by
admin | 
Today (at my Day Job) I had the task of taking a PSD and slice it up ready to go into a CMS. For the first time I decided it was time to start using some css3 and html5.
Everything was running smoothly until I hit the main navigation. Each navigation item needed to have an oval background on hover. See below.
Please excuse my dodgy paint drawing…. I’m on my girlfriends laptop at the moment with no photoshop.
After an hour or two’s research I found the perfect concoction. I’m going to explain below how to take a block level element and make the corners rounded.
I’m going to write all the code and comment it so you can see where I’m coming from.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<style type="text/css">
div#roundMyCorners {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
/* The above is just some styling to give the target some dimensions and colours to work with */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
/* The above will give #roundMyCorners 6px radius'd corners in firefox/safari/chrome etc.*/
/* This is all that is needed for the above browsers */
}
</style>
<!-- There is no Internet Explorer compatable CSS rules for rounded corners so we'll use a nice simple jQuery plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<!-- Reference jQuery from CDN -->
<script type="text/javascript" src="http://www.methvin.com/jquery/jquery.corner.js"></script>
<script type="text/javascript">
///once document is loaded & browser is Internet Explorer
if($.browser.msie) {
$(document).ready(function(){
///SELECTOR .Corner object method
$('#roundMyCorners').corner();
});
}
</script>
</head>
<body>
<!-- This is the target -->
<div id="roundMyCorners"></div>
</body>
</html>
Thanks to Chris @ Css-tricks.com for his html5 page structure.
