Setting Borders Inside DIV

CSS3 Features a ton of properties which can be effectively used to make awesome easily than with the previous versions, here is a tutorial to get a double border or a border inside a box using a single DIV


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

<div id="drop-box">

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.

	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.


Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. 9 Ways to Boost the Design of Your Sports Team Website

  2. DevOps Tools

  3. The Best Marketing Apps to Use with Shopify

  4. Tips to Increase Software Development Speed

  5. Mitigating Risks In Custom Software Development


News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.