12 September 2010

This tutorial shows you how to make round corners for divs. From scratch with and without jQuery UI library.

If you use other functions of jQuery UI library, then it is the way to go. If you don't then there is no point of using it just for making round corners. IE has problems with supporting rounded corners, so you have to consider that.

Using the jQuery UI library:

For this you need the library that you can get from jqueryui.com. Sample HTML code:
Source code viewer
  1. <html><head>
  2. 	<!--This tutorial needs the jQuery UI library only, for css round corners-->
  3. 	<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
  4. </head><body>
  5. 	<div class="ui-corner-all" style="border:1px solid black">
  6. 		Here we have black round corners on every corner. You can also make a single corner round or only top corners.
  7. 	</div>
  8. </body></html>
Programming Language: HTML
Round corner classes in jQuery UI:
  • ui-corner-tl - top left corner
  • ui-corner-tr - top right corner
  • ui-corner-bl - bottom left corner
  • ui-corner-br - bottom right croner
  • ui-corner-top - top corners
  • ui-corner-bottom - bottom corners
  • ui-corner-right - right corners
  • ui-corner-left - left corners
  • ui-corner-all - all corners
If you want to change the corners size you have to edit your style sheet file.

Do It Manually:

I don't see any point of writing code from scratch if there are libraries allready made, but this is pritty heavy library and you don't want to use it just for rounded corners. Here is the CSS code of rounded corners:
Source code viewer
  1. .ui-corner-tl{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px}
  2. .ui-corner-tr{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}
  3. .ui-corner-bl{-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}
  4. .ui-corner-br{-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}
  5. .ui-corner-top{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}
  6. .ui-corner-bottom{-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}
  7. .ui-corner-right{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}
  8. .ui-corner-left{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}
  9. .ui-corner-all{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
Programming Language: CSS
The radius is 5 pixels, but you can change it easily with find and replace.