Demo 1

This demo shows a simple layout that consist of four corner images and for side images. 

$("#demo1").dcCreate({
	imgPrefix: "demo/demo1-",
	fileType: ".gif",
	expand: 8,
	position: "outside"
});

Demo 2

Demo shows the difference between inside and outside positioning. 

$("#demo2").dcCreate({
  imgPrefix: "demo/demo2-",
  fileType: ".png",
  expand: 10,
  radius: 22,
  position: "inside"
});


$("#demo2").dcCreate({
  imgPrefix: "demo/demo2-",
  fileType: ".png",
  expand: 10,
  radius: 22,
  position: "outside"
});

Demo 3

Demo shows how the dcResize() function works. 

$("#demo3").css({"background": "#fff", "color": "#000", "padding": "15px"}).dcCreate({
  imgPrefix: "demo/demo3-",
  fileType: ".gif",
  expand: 5,
  position: "inside"
});

this.height+30

$('#demo3').dcResize();
$('#demo3').dcResize(false);

All Together

Demo 4

Demo shows how the dcClear() function works. 

$("#demo4").dcCreate({
  imgPrefix: "demo/demo4-",
  fileType: ".gif",
  expand: 10,
  radius: 22,
  position: "outside"
});

$('#demo4').dcClear() Reset

Advanced

This shows some advanced ways to use DivCorners. 

$("#advanced1").dcCreate({
  imgPrefix: "demo/advanced1-",
  fileType: ".gif",
  expand: "41 4 7 4",
  radius: "0 35 35 53",
  position: "inside"
}).find("> .dcbottom-right").click(function(){
  window.location="http://www.google.com";
});


$("#advanced2").dcCreate({
  imgPrefix: "demo/advanced2-",
  fileType: ".gif",
  expand: "57 7 31 11",
  radius: "0 11 35 35",
  position: "inside"
});

DivCorners Download

ver 1.5.2

Please select the packages that you wish to download?



In what file format would you prefer your download?