jQuery rounded corners


/ Published in: JavaScript
Save to your folder(s)

A light-weight solution for x-browser rounded corners solution, degrades gracefully back to square corners


Copy this code and paste it in your HTML
  1. $( "div.rounded" ).each( function( i ) {
  2. $( this ).prepend( '<span class="rounded_top_left"></span>' );
  3. $( this ).prepend( '<span class="rounded_top_right"></span>' );
  4. $( this ).append( '<span class="rounded_bottom_left"></span>' );
  5. $( this ).append( '<span class="rounded_bottom_right"></span>' );
  6. });
  7.  
  8. // Add rounded corners to the left corners
  9. $( "div.rounded_left" ).each( function( i ) {
  10. $( this ).prepend( '<span class="rounded_top_left"></span>' );
  11. $( this ).append( '<span class="rounded_bottom_left"></span>' );
  12. });
  13.  
  14. // Add rounded corners to the right corners
  15. $( "div.rounded_right" ).each( function( i ) {
  16. $( this ).prepend( '<span class="rounded_top_right"></span>' );
  17. $( this ).append( '<span class="rounded_bottom_right"></span>' );
  18. });
  19.  
  20. // Add rounded corners to the top corners
  21. $( "div.rounded_top" ).each( function( i ) {
  22. $( this ).prepend( '<span class="rounded_top_left"></span>' );
  23. $( this ).prepend( '<span class="rounded_top_right"></span>' );
  24. });
  25.  
  26. // Add rounded corners to the bottom corners
  27. $( "div.rounded_bottom" ).each( function( i ) {
  28. $( this ).append( '<span class="rounded_bottom_left"></span>' );
  29. $( this ).append( '<span class="rounded_bottom_right"></span>' );
  30. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.