RoundedCorners

What is it?

RoundedCorners is a very simple plugin for jQuery, that allows to round corners for images without using css3. It’s image based, so you can simply customize it to your needs.

Features

  • Round corners for images from jQuery selector
  • Save custom css styles for images after rounding
  • Draw rounded corners with shadow
  • Customizable through CSS and simple settings

How to use?

Include jQuery library, RoundedCorners CSS and js file into HEAD section of your website:

<link rel="stylesheet" type="text/css" href="js/rounded/jquery.rounded.css" media="screen"  />
<script type="text/javascript" src="js/rounded/jquery.rounded.js"></script>

 

Insert a js script to launch RoundedCorners (it rounds all images with class “rounded”, but you can use any different jQuery slector):

<script type="text/javascript">
  $(window).load(function() {
    $(".rounded").RoundedCorners({
      topleft: 'js/rounded/tl.png',
      topright: 'js/rounded/tr.png',
      bottomleft: 'js/rounded/bl.png',
      bottomright: 'js/rounded/br.png'
    });
  });
</script>

 

Optional script for RoundedCorners with shadow:

<script type="text/javascript">
  $(window).load(function() {
    $(".rounded").RoundedCorners({
      topleft: 'js/rounded/tlsh.png',
      topright: 'js/rounded/trsh.png',
      bottomleft: 'js/rounded/blsh.png',
      bottomright: 'js/rounded/brsh.png',
      tborder: 'js/rounded/tsh.png',
      rborder: 'js/rounded/rsh.png',
      bborder: 'js/rounded/bsh.png',
      lborder: 'js/rounded/lsh.png',
      drawBorders: true
    });
  });
</script>

Get RoundedCorners

Current version: 0.4
Download: rounded.zip