Home > CSS > Tab Border Curve

Tab Border Curve


Hi

try this example:

<style type="text/css">
u.corner u
{
 background-color: ButtonFace;
 display: block;
 font-size:1px;
 height: 1px;
 overflow: hidden;
 text-decoration: none;
}
u.corner u.h1
{
 margin: 0 5px;
}
u.corner u.h2
{
 margin: 0 3px;
}
u.corner u.h3
{
 margin: 0 2px;
}
u.corner u.h4
{
 margin: 0 1px;
 height: 2px;
}
.uContent
{
 background-color: ButtonFace;
 height: 200;
 padding: 5px;
}
</style>

<div>
 <u class="corner">
  <u class="h1"></u>
  <u class="h2"></u>
  <u class="h3"></u>
  <u class="h4"></u>
 </u>
 <div class="uContent">New content</div>
 <u class="corner">
  <u class="h4"></u>
  <u class="h3"></u>
  <u class="h2"></u>
  <u class="h1"></u>
 </u>
</div>

Good Luck

Categories: CSS
  1. No comments yet.
  1. No trackbacks yet.

Leave a comment