Creating a curve through CSS (without using an image)
{ Posted on Jun 04 2009 by Ryan Montilla }
Long time ago I used an image to create a curve box for most of my website design, but I really want a curve box in CSS without using an image. Well I guess I am lucky to find out because I found it guys. I’m gonna share it also to you what I found because I know you are also looking for this. I am impressed of the output because no images were used to create this curve.
This original author is from mindrulers.blogspot.com.
YOUR HTML CODE
<html>
<head>
<link href=”curvedbox.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”curvedBox”>
<span>
<span class=”r1″ ></span>
<span class=”r2″ ></span>
<span class=”r3″ ></span>
<span class=”r4″ ></span>
</span>
<div class=”content”>
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class=”r4″ ></span>
<span class=”r3″ ></span>
<span class=”r2″ ></span>
<span class=”r1″ ></span>
</span>
</div>
</body>
</html>
<head>
<link href=”curvedbox.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”curvedBox”>
<span>
<span class=”r1″ ></span>
<span class=”r2″ ></span>
<span class=”r3″ ></span>
<span class=”r4″ ></span>
</span>
<div class=”content”>
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class=”r4″ ></span>
<span class=”r3″ ></span>
<span class=”r2″ ></span>
<span class=”r1″ ></span>
</span>
</div>
</body>
</html>
YOUR CSS CODE
body {background-color:#000;}
.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}
.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}
.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}
| Subscribed with my site for more tutorial updates |
Possibly Related Posts:
- How to Create a Square border Hover Effect Using CSS
- How to Control Adsense Width in CSS
- CSS Background Opacity
- How to Create a Hover Image Image Enlarger Popup in CSS
- How to remove blue border on image link
5 Responses
to “Creating a curve through CSS (without using an image)”
4 Trackback(s)
- Aug 6, 2009: Graphic Design Links and Tutorials
- Aug 6, 2009: 60+ Excellent Fresh User Submitted Links | tripwire magazine
- Aug 7, 2009: 纯css的圆角| CSS| 前端观察
- Aug 15, 2009: Don-Jai : โดนใจ | [โปรเจคจบ] Design phase : ออกแบบหน้าเวบ
Hello guys! My name is R3ALISTIC WEB - a.k.a "R3" . I am fulltime / freelance web designer and blogger wanna be from the Philippines. R3ALISTIC is a blog site all about tutorials, design, ideas, and daily web trends. 
Where is the example???
And, you stole this article from mindrulers.blogspot.com and you don’t put a live link to the original author???
You are a fucking Looser!!