tsBorder

Add semi-transparent borders over block level elements

View the Project on GitHub faffyman/tsBorder

Example

Add a 10px black border to an image

// black 10px border
   $('#box1 img').tsBorder({
                            thickness: 10,
                            color: '#000000',
                            opacity:0.3
                      });
Big Fish

You can chain calls to get multiple borders

This example will create a 20px red border and a 10px green border, giving the impression of a green border with an inner red border.

    $('#box1 img').tsBorder({
            thickness: 20,
            color: '#ff0000',
            opacity: 0.6,
        }).tsBorder({
            thickness: 10,
            color: '#00ff00',
            opacity: 0.5,
        });
Big Fish

Apply a Border radius

SO long as your radius is not larger that the thickness of yoru border, you can pass through the radius dimensions(will be px) for each corner


$('#box3 img').tsBorder({
                           thickness: 20,
                           color: '#ff0000',
                           opacity:0.6,
                           borderTopLeftRadius: 8,
                           borderTopRightRadius: 11,
                           borderBottomRightRadius: 16,
                           borderBottomLeftRadius: 20,
                          });
Big Fish
OR - you can give all corners the same radius with a single option

$('#box4 img').tsBorder({
                           thickness: 8,
                           color: '#ff0000',
                           opacity:0.6,
                           borderRadius: 8
                          });
Big Fish

remember the underlying element should have the same border-radius, or else it wont look right.

You can use it to add a border to any block element, not just images.

Play

Play about with this jsFiddle: http://jsfiddle.net/faffyman/Vn8PN/

In The Wild

You can see it in action on a few sites that have used it.