View Full Version : Rounded corners on borders

01-27-2007, 01:10 AM
I am having trouble finding good information on how to make rounded borders using images. I need to know the simplest way of going about this. Any help would be much appreciated.

01-27-2007, 01:18 AM
Hello phpnewb,
I think the simplest is to have a top image that has both left and right corners and the top border. Place that image like a header.
Same with a bottom image.
Then put a container div in the middle with borders that line up to your top and bottom images.

Like this (http://www.nopeople.com/cworld/)

01-27-2007, 02:55 AM
Exactly how would I go about doing this?

01-27-2007, 03:13 AM
Hereís an example. This one assumes a fixed‐width box, that you want all four corners rounded, and that transparency will not be used for the corners. It requires three images.

For corner transparency, you need to stack the boxes instead of nesting them. For a box that isnít fixed‐width, you probably need two more boxes.


<div id="box">


div#box {
width: 200px;
background: url("middle.png") repeat-y; /* 200◊1 pixels */
div#box > div {
padding-top: 20px;
background: url("top.png") no-repeat; /* 200◊20 pixels */
div#box > div > div {
padding-bottom: 20px;
background: url("bottom.png") bottom left no-repeat; /* 200◊20 pixels */

01-27-2007, 05:43 PM
Exactly how would I go about doing this?
I thought I was showing you exactly how to do it. Did you look at the code on the example I linked?

Arbitrator's example is very elegant - if you could see the images he means for it to use it might be easier to understand.

01-27-2007, 09:08 PM
to make this fluid would I just change the box width from pixels to percentage.

01-27-2007, 09:29 PM
to make this fluid would I just change the box width from pixels to percentage.No, you would need to nest more boxes. In the example I showed above, the top and bottom sets of corners are joined to minimize the number of images and markup required; this is why itís fixed width.

To get a completely fluid, rounded‐corner box, I believe that youíd have to nest at least two more boxes and have at least two more background images. You should be able to build one off of the previous example or maybe someone else will show you how.

01-28-2007, 04:30 AM
This isn't about round borders, but round corners.

#main-right{ margin-right:2%;

.roundedtopa {
background: url(img/righttopcornerlink3.jpg) no-repeat top right;
.roundedbottoma {
background: url(img/leftbottomcornerlink3.jpg) no-repeat top right;
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;

<div id="main-right">
<div class="roundedtopa">
<img src="img/lefttopcornerlink3.jpg" alt=""
width="15" height="15" class="corner"
style="display: none" />

<form method="post" action="phpBB2/login.php">

Username <input type="text" class="post" name="username" size="30">
<div id="password">
Password <input type="password" class="post" name="password" size="30">
Remember me <input type="checkbox" name="autologin" />

<div id="submit-reset">
<input type="submit" value="Log in" class="mainoption" name="login"> <br>
<input type="hidden" name="redirect" value="" />
Not a member <a href="phpBB2/profile.php?mode=register">Register</a><br>
<font size="2">It's free and easy.</font><br>
<a href="phpBB2/profile.php?mode=sendpassword"><font size="2">Forgot your password</font></a>


<div class="roundedbottoma">
<img src="img/rightbottomcornerlink3.jpg" alt=""
width="15" height="15" class="corner"
style="display: none" />


I don't know why this isn't displaying properly. The code is nearly exact to my other rounded divs. It is displaying the corners, but their is like a few pixel edge going around the div. Not sure how to get rid of it.


01-28-2007, 04:58 PM
problem fixed.