How to Add Fluid Borders to Your Boxes with CSS

This is similar to example 4 but this time the shading is reversed to give an inset appearance to the border.

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 5</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

/* Inset 3D Curved */
.inset {
  background:transparent;
  width:40%;
  }
.inset h1, .inset p {
  margin:0 10px;
  }
.inset h1 {
  font-size:2em; color:#fff;
  }
.inset p {
  padding-bottom:0.5em;
  }
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
  height:1px;
  }
.inset .b2 {
  background:#ccc; 
  border-left:1px solid #999; 
  border-right:1px solid #aaa;
  }
.inset .b3 {
  background:#ccc; 
  border-left:1px solid #999; 
  border-right:1px solid #ddd;
  }
.inset .b4 {
  background:#ccc; 
  border-left:1px solid #999; 
  border-right:1px solid #eee;
  }
.inset .b4b {
  background:#ccc; 
  border-left:1px solid #aaa; 
  border-right:1px solid #fff;
  }
.inset .b3b {
  background:#ccc; 
  border-left:1px solid #ddd; 
  border-right:1px solid #fff;
  }
.inset .b2b {
  background:#ccc; 
  border-left:1px solid #eee; 
  border-right:1px solid #fff;
  }
.inset .b1 {
  margin:0 5px; 
  background:#999;
  }
.inset .b2, .inset .b2b {
  margin:0 3px; 
  border-width:0 2px;
  }
.inset .b3, .inset .b3b {
  margin:0 2px;
  }
.inset .b4, .inset .b4b {
  height:2px; margin:0 1px;
  }
.inset .b1b {
  margin:0 5px; 
  background:#fff;
  }
.inset .boxcontent {
  display:block; 
  background:#ccc; 
  border-left:1px solid #999; 
  border-right:1px solid #fff;
  }

Conclusion

You may have noticed that all the above style sheets have the same initial setup for <p> and <h1> tags as shown below:

Using this method of producing Krazy Korners, it's necessary to get rid of any margins at the top and bottom of the boxcontents div as these will cause a gap to appear between the boxcontent and the curved corners. The simplest way to do this with my examples is to get rid of the top and bottom margins altogether and apply a little bottom padding to the <p> tag to raise it away from the bottom. You can, of course style this as you wish for your application. As you can see, the styles for Krazy Korners are endless and just require a little imagination.

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/

Webcasts

Downloads and eKits

Tutorials and Demos