« How to apply Border Radius property in PHPMotion
In Magento – Steps to Create Multistores »

How to apply Rounded corner for image

In this Blog post, we have shared the simple steps to apply Rounded corner for image to support in IE browser. For this, we use .htc file (html component file) which is used to deliver non specific functionality using behavior Url. .htc file is nonstandard which uses vml, javascript and jscript.

Through .htc file, border radius does not crap the images. It only craps the background images. For rounded corner images, we use javascript to hide the four corners of the image using four images. The four images must be similar to the background color.To achieve this, we will need to copy the css content to ie.css and define new class name for images called as rounded.

Java script code:

Code
  1. $(document).ready(function() {
  2. $('img.rounded').one('load',function () {
  3. varimg = $(this);
  4. varimg_width = img.width();
  5. varimg_height = img.height();
  6. // build wrapper
  7. var wrapper = $('
  8. ');
  9. wrapper.width(img_width);
  10. wrapper.height(img_height);
  11. // move CSS properties from img to wrapper
  12. wrapper.css('float', img.css('float'));
  13. img.css('float', 'none')
  14. wrapper.css('margin-right', img.css('margin-right'));
  15. img.css('margin-right', '0')
  16. wrapper.css('margin-left', img.css('margin-left'));
  17. img.css('margin-left', '0')
  18. wrapper.css('margin-bottom', img.css('margin-bottom'));
  19. img.css('margin-bottom', '0')
  20. wrapper.css('margin-top', img.css('margin-top'));
  21. img.css('margin-top', '0')
  22. wrapper.css('display', 'block');
  23. img.css('display', 'block')
  24. // IE6 fix (when image height or width is odd)
  25. if ($.browser.msie&& $.browser.version == '6.0')
  26. {
  27. if(img_width % 2 != 0)
  28. {
  29. wrapper.addClass('ie6_width')
  30. }
  31. if(img_height % 2 != 0)
  32. {
  33. wrapper.addClass('ie6_height')
  34. }
  35. }
  36. // wrap image
  37. img.wrap(wrapper);
  38. // add rounded corners
  39. img.after('
  40. ');
  41. img.after('
  42. ');
  43. img.after('
  44. ');
  45. img.after('
  46. ');
  47. }).each(function(){
  48. if(this.complete) $(this).trigger("load");
  49. });
  50. });

Below is the Html Code :

Code
  1. <head>
  2. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  3. <link rel="stylesheet" href="css/styles.css"/>
  4. <script type="text/javascript" src="js/lib/jquery.js"></script>
  5. <script type="text/javascript" src="js/main.js"></script>
  6. </head>
  7. <body>
  8. <p>
  9. <imgsrc="images/01.jpg" alt="image"/>
  10. </p>
  11. </body>

Here is the link to download the Js files

Finally place the Css Code :

Code
  1. .rounded_wrapper {
  2. position: relative;
  3. }
  4. .rounded_wrapperimg {
  5. border-width: 0;
  6. border-style: none;
  7. }
  8. .rounded_wrapper div {
  9. height: 7px;
  10. position: absolute;
  11. width: 100%;
  12. }
  13. .rounded_wrapper .tl {
  14. top: 0;
  15. left: 0;
  16. background: url(img/rounded_corners/tl.gif) no-repeat left top;
  17. }
  18. .rounded_wrapper .tr {
  19. top: 0;
  20. right: 0;
  21. background: url(img/rounded_corners/tr.gif) no-repeat right top;
  22. }
  23. .rounded_wrapper .br {
  24. bottom: 0;
  25. right: 0;
  26. background: url(img/rounded_corners/br.gif) no-repeat right bottom;
  27. }
  28. .rounded_wrapper .bl {
  29. bottom: 0;
  30. left: 0;
  31. background: url(img/rounded_corners/bl.gif) no-repeat left bottom;
  32. }
  33. .ie6_width .tr {
  34. right: -1px;
  35. }
  36. .ie6_width .br {
  37. right: -1px;
  38. }
  39. .ie6_height .br {
  40. bottom: -1px;
  41. }
  42. .ie6_height .bl {
  43. bottom: -1px;
  44. }

Finally you will get the output similar to the screenshot given below :

Image rounder corner

  • Share/Bookmark

This entry was posted on Saturday, October 29th, 2011 at 1:17 am and is filed under CSS Tips, XHTML Templates. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

« Back to text comment