I was trying to mockup an Ajax based upload script for my university project, where I needed to create a Drop Here box, I know its easy with a wrapper but I just though to give it a hard way and try to achieve that box kind of design with a single DIV

Lets get the magic done using CSS. I’m using the pseudo classes to show magic here but there is also other ways using box shadow with 0 spreading. I used it just because it stuck my head.

#drop-box{	
	width: 200px;
	height: 200px;
	position: relative;
	border: 10px solid rgb(14, 56, 119);  
	margin: 20px;
	text-align: center;
}
#drop-box:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 2px dashed rgb(255,255,255);
  background-color: rgb(14, 56, 119);
}

This will end up generating a Blue box with dashed border inside. Now its just a matter of a few JavaScript functions to add a selection file function to the box with click listeners, will get the up in here soon.

CSS-Multiple-Borders
Don’t drop files here, its just an image.