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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: