Quick And Easy Rounded Corners

Friday, November 13th, 2009 at 9:00 am

So you want quick easy rounded corners? The best way to achieve this is through progressive enhancement. I’m sure you have heard of progressive enhancement.
Not sure what it is? Well it basically means, for the more up to date browsers, use these particular styles/functionality, otherwise use the standard. You are basically giving something a little better for people running the latest browsers. But note that if the users browser does not support the enhancment it should not stop the functionality of your website.

So the progressive enhancement we are using is te CSS3 way. Some people may say this is wrong but really it’s only your Internet explorer users that will miss out.
If it does matter to you about Internet explorer users, then add in the JavaScript method for rounded corners using a conditional statement to load the JavaScript files.

So here is what your code could look like:

The CSS

#wrapper {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background-color: red;
   margin: 0 auto;
   padding: 25px;
}

The jQuery Using the Rounded Corners Plugin

jQuery Rounded Corners Project

   $(document).ready(function() {
      $('#wrapper').corners();
   });

The HTML

<!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" />
<meta name="description" content="Website description" />
<meta name="keywords" content="keyword, keyword, keword" />
<title>Website Title</title>
<link rel="stylesheet" href="yourstylesheet.css" type="text/css" media="screen,projection" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="google.load('jquery', '1.2.6')" type="text/javascript"></script>
<script src="jquery.corners.js" type="text/javascript"></script>
<script src="yourjs.js" type="text/javascript"></script>
</head>
<body>

<div id="wrapper">Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</div>

</body>
</html>

So What Does This All Do?

Firstly we have our css from yourstylesheet.css. The css uses border-radius, which is proposed by the W3C. -moz-border-radius is Mozilla’s implementation of border radius, and -webkit-border-radius is Webkits implementation of border radius. These will stay the same until the official release of border-radius.

Secondly we have our JavaScript which uses the jQuery Rounded Corners plugins.

Thirdly we tie it all together in our HTML document. The first two scripts load jQuery version 1.2.6 from Google. The next script is the Rounded Corners Plugin and last is our implementation of the plugin. Following that we have our standard div wrapper with a paragraph of Lorem Ipsum so we can see our rounded corners in effect.

Thats it for this quick tutorial on adding rounded corners to your website. Look into further advanced implementation with determining which corners are rounded and what are not.

One Response to “Quick And Easy Rounded Corners”

Nulled Scripts
December 23rd, 2009 at 10:33 am
Excellent post..Keep them coming Thanks for sharing.