Rounded corners using CSS

Slinkie

Slinkie

Slinkie

Associate
Joined
21 Oct 2002
Posts
1,680
Location
UK
Hi Folks,

I have a few title bars on a website that I want to add rounded corners to the top left and top right.

However I am struggling as I am already using a background image for behind the title text so how do I easily go about putting rounded corners in,

Current CSS looks like this;

Code: 
#content .top {
	height: 16px;
	padding: 8px 0px 6px 0px;
	background: url('../image/11.png') repeat;
	
}
#content .top h1, .heading {
	color: #FFFFFF;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin: 0px;
}

I have 4x4 pixel image repeated behind all of the text so how do I go about adding rounded corners aswell?
 
Hi,

No, I have used the repeated 4x4 image as it is used in a number of places on my site, all different widths.

I was looking to create 2 4x4 pixel images with the left and right round corners and use them in the top left and top right and have the rest of the space filled with the regular 4x4 but I don't think this is possible.

I can potentially make sure all of the title backgrounds are the same height and say have a 16x4 image at either end if that is easier?
 
the easiest way to do it imo is to have one image set to the maximum height and width it'd ever be, which has the top left corner and then the main background repeating all the way across. then have another small image which is just the top right corner. set the bigger image as the header background aligned top left, and follow that with a div that has the right hand corner.
 
You can do it in a variety of ways.

One is to ignore IE and use built in CSS rounded corners (part of CSS3), you can google this for more information (css3 rounded corners or something).

Another way is to add 2 divs inside the .top container, give them each classes like .topleft .topright, then add position:relative; to the .top div.

Then absolutely position the 2 other divs, and give them each a 4x4 background for the rounded corners.

So your code would look like:

Code: 
<div class="top">
  <div class="topleft"></div>
  <div class="topright"></div>
  <h1>etc

Code: 
#content .top {
	height: 16px;
	padding: 8px 0px 6px 0px;
	background: url('../image/11.png') repeat;
position:relative;
	
}
#content .top h1, .heading {
	color: #FFFFFF;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin: 0px;
}
#content .top .topleft{
width:4px;
height:4px;
background: url(topleft_corner.gif) no-repeat;
position:absolute;
top:0;
left:0;
}
#content .top .topright{
width:4px;
height:4px;
background: url(topright_corner.gif) no-repeat;
position:absolute;
top:0;
right:0;
}
 
I think there is also some javascript that will add rounded corners, google is probably your friend. Probably easier than using CSS and multiple nested divs (although that is the approach I have used because I didn't know much about javascript at the time).
 
If you don't care about IE, this will work in Webkit and Mozilla-based browsers. It doesn't use any images, the code is cleaner and lighter and it degrades in browsers that don't support it.

<style type="text/css">
.box{
border: 1px solid #ccc;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div class="box">
Stuff in a rounded box
</div>
Click to expand...
 
You must log in or register to reply here.
Back
Top Bottom