CSS - Is It Possible To Create Rounded Corners With Out Images.

OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box.

Code:

<div id="thebox">
<div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div>
</div>

So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that:

Code:

#thebox {
    position: absolute;
    left: 500px;
    top: 300px;
}
.dbtopleft {
    background: url(cb_tl.png) no-repeat;
    height: 25px;
}
.dbtopright {
    background: url(cb_tr.png) no-repeat top right;
    height: 25px;
    padding: 0 25px 0 25px;
}
.dbtoploop {
    background: url(cb_t.png) repeat-x;
    height: 25px;
}

So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE?

Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary.

Hi i know there prolly loads around, iv been searching for ages but cant find one that will do the job.
I want to create rounded corners in CSS but completely CSS no javascript no images etc.

i found one called spiffy corners, it would have been perfect but it was only does complete box color, i only want borders, i wouldnt figure out how to change it to just borders

Any one have any ideas?
http://www.spiffycorners.com/

The page I'm working on
and
The css script

as you can see, the inside of the corners are not rounded. How do I resolve this?

I am writing in hopes someone can help me figure out some problems I am having. All problems occur on the following page: http://cbo4edu.org/newSite/home.html

PROBLEM #1
I cannot figure out why Column 3 is positioned outside the wrapper div. I need the solid black border to align with the other borders on the right-hand side.

PROBLEM #2
As you can see I am having trouble getting the rounded corner divs to display correctly in the 3rd column. Why are the top-right corners displaying the top-left? Why is the top edge of the lower rounded corner div absent? And why is the bottom-left corner have a blue line under it? I used the method presented he http://kalsey.com/2003/07/rounded_corners_in_css/

PROBLEM #3
I need to add a border between Column 1 & 2 and a border between Column 2 & 3. I have tried adding a border attribute to the CSS file but that does not display anything.


Any help on any of these problems are much appreciated.

Hi All,

In one of my websites, I like to have boxes (rounded corners) like here, which is almost ok, except the rightside repeater is not repeating and not in the place.

Do anybody know how to fix this? Any help would be appreciated.

EDIT: Tried in different way, please have a look at it here

I was looking for the best way to implement rounded corners for my website and its been difficult evaluating the different methods and deciding which way is the best way to go.

So far the mountaintop method looks the most promising. The idea is to create a transpatent gif with the corners of the image as a white mountain shape. When you make this the background of the CSS div, the color of the background offsets and creates the image of rounded corners.

I am having a small issue implementing that as well, for example, ive created two images one for the top and one for the bottom, but I am not quite sure how to implement it as you cannot specify two background images per CSS div.

Anyone have any thoughts on this?

Hello,

I am in the making of my first css site. I made some rounded corners boxes in photoshop and saved them as gif. When I load them in the css code, the image shows up as i wanted in the box divs, but the issue is that the white box around the rounded corners are there and is very disturbing. Any tips on how to remove these white edges?

Any answer is appreciated

Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container.

If I use a border-top it extends past the rounded corners.

Any help would be greatly appreciated

Link to the page in progress:

http://www.rustbug.com/test/journey-home-page.html

Here is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	      	body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
			#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
			#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
			#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
			p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}			
			.roundtop { background: url(images/tr.gif) no-repeat top right;}
			.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
			.roundbottom { background: url(images/br.gif) no-repeat top right;}
			img.corner { width: 8px; height: 8px; border: none; display: block !important;}


			
        </style>   


</head>

<body>

<div id="wrapper">
	<div id="container1">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">Hello</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>
    
    	<div id="container2">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>
    
    	<div id="container1">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">Hello</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>

</div>
</body>
</html>

Hi

I'm trying to match the overhead menu element of a Coppermine theme to a phpBB style. I've just run into a few problems and I was wonding if anyone could help please?

Coppermine here - http://www.brummiesfans.com/coppermine
phpBB3 here - http://www.brummiesfans.com/main/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. What I have tried to do is to use the CSS from phpBB3, but on this occasion, it has
not worked. The code is shown below. I don't have a problem in Firefox, Safari or Chrome, as there is code in place to sort the rounded corners out in CSS, however I need the missing piece put into place for IE, and this is where I need help.

In phpBB3 the div classes are called "corners-top" and "corners-bottom".

The relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML
Code:

		<div class="navbar">

			<span class="corners-top"><span></span></span>

            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
                <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>

			<span class="corners-bottom"><span></span></span>	
		</div>

STYLE.CSS
Code:

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}


span.corners-top {
	background-image: url("images/corners_left.png");
}

span.corners-top span {
	background-image: url("images/corners_right.png");
}

span.corners-bottom {
	background-image: url("images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

Thanks in advance for any assistance.

Martin

I used this tutorial to create my rounded corner boxes.

Now if I change the font in the content of the box to italics, IE goes bananas. I read about the "Holly Hack" by setting the height to 1%. I can't seem to get it work with these rounded corner boxes. I'm not sure what div to apply it to. Here is the relevant html for the boxes:

Code:

<div class="bluebox">
			<div class="hd"><div class="c"></div></div>
			<div class="bd">
				<div class="c">
                                       <h4>Something</h4>
			               <p>Content Goes Here</p>
				</div>
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>

And the css is this:

Code:

.bluebox {
margin:0 auto 8px auto;
color:#fff;
}

.bluebox .hd .c{
font-size:1px;
height:16px;
}

.bluebox .ft .c{
font-size:1px; /* ensure minimum height */
height:18px;
}

.bluebox .hd {
background:transparent url(images/tlb.gif) no-repeat 0px 0px;
}

.bluebox .hd .c {
background:transparent url(images/trb.gif) no-repeat right 0px;
}

.bluebox .bd {
background:transparent url(images/mlb.gif) repeat-y 0px 0px;
}

.bluebox .bd .c {
background:transparent url(images/mrb.gif) repeat-y right 0px;
}

.bluebox .bd .c .s {
background:#1caaec url(images/msb.jpg) repeat-x 0px 0px;
}

.bluebox .ft {
background:transparent url(images/blb.gif) no-repeat 0px 0px;
}

.bluebox .ft .c {
background:transparent url(images/brb.gif) no-repeat right 0px;
}

.bluebox h4 {
font:0.9em Verdana, sans-serif;
font-weight:bold;
padding-left:5px;
}

.bluebox p {
font:0.8em Verdana, arial, sans-serif;
font-style:italic;
padding:2px 10px 8px 5px;
text-align:justify;
color:#000000;
}

Any ideas where to stick the Holly Hack?

One problem I've had so far with CSS, is that I haven't found a good way to display rounded corners or anything that would change the perfect rectangle of a div. Previously, using tables, I would just set up a 9x9 table with a repeating background on the top bottom and sides, then an image in each corner. That allowed me a lot of flexibility.

Is there some sort of equivalent to this in CSS, or a way of getting around it?

I'm looking for suggestions for CSS based rounded corners. I've seen a number of nice tutorials that show how to do solid corner, but I'm interested specifically in corners with borders.

Simple Machines Forum has something he

http://mods.simplemachines.org/

But I'm having trouble digging the details out of the style sheets. I can't seem to make it work for me.

I'm really trying to avoid any JS. I'm having trouble getting the corners to line up when the parent DIV has a border. The corner images want to sit inside the border. I understand why this is, but not how to do it correctly for what I want.

Think of a box with, say, a 2 pixel border and rounded corners... Just like the example I've provided above.

Ideas?

Hi all,

I would like to create a menu that has the following:
current - top left rounded corner, top right rounded corner and background of the same colour (see the below image for example).
These have to be in Validate CSS and without images
I have found the following but it is not a Validate CSS and those not work in IE

Any help please?

Underneath please find the following:
What I have found (not CSS Validate) Link for the webpage (work only in Firefox - rounded corners) Image (example) CSS (code) XHTML (code)
Thanks in advance

Ziffa27

1
Code:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

2
http://www.amaze.com.mt/menu/index.html

3


4
Code:

html, body, header, menu, ul, li {
	margin: 0;
	padding: 0;
}

#header {
	background: #000000;
	height: 120px;
}

#menu {
	background: #000000;
	height: 40px;
	padding-left: 100px;
}

#menu ul {
	list-style: none;
}

#menu li {
	float: left; width: inherit;
	margin: 0 0.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 10px;
}

#menu li a {
	color: #999999;
	display: block;
	padding: 15px 10px;
	text-decoration: none;
}

#menu li a:hover {
	color: #FFFFFF;
}

#menu ul li.current a {
	background-color: #FFFFFF;
	-moz-border-radius-topleft: 5px;	/*work only in Firefox*/
	-moz-border-radius-topright: 5px;	/*work only in Firefox*/
	color: #000000;
}

#menu ul li.current a:hover  {
	color : #000000;
}

5
Code:

<html>
<head>
<title>Welcome to Amaze! - Menu</title>
<style type="text/css" media="all">@import url(style.css);</style>
</head>
<body>
	<div id="header">
	</div>
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li class="current"><a href="#">Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</body>
</html>

Hello. I created my own rounded corners fluid site from scratch using CSS and images in the same way you would do it with a table, using the 3x3 format (topleft, topcenter, topright, midleft, midcenter, midright, botleft, botcenter, botright).

The problem: The top section works great, but its the middle right section that doesnt justify properly.

What you see: For the left and right middle, I have a background repeat on the y-axis. The left background is fine, as well as the middle, but a div inside the middle center is pushing right background to an area below (as shown in this image).

http://clients.activemd.net/images/css-problem-screen1.jpg

You will notice theres only whitespace on the right, and the background I'm trying to repeat is below it on the right.

Heres my CSS:

Code:

/* CSS Document */ body { margin: 20px auto; /* Had to add margin-top 20px to topleft and top right corners to compensate. */ font-family: Verdana, Geneva, sans-serif; } #main { margin: 20px auto; width: 100%; height: 100%; z-index: 0; } .clear { clear: both; } h1 { margin: 0px 0px 0px 50px; } ul { margin: 0px; padding: 0px; } /* Top Layout */ #top { height: 146px; margin: 0px; padding: 0px; } #top_left { margin-top: 20px; background: url(../images/top-left-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; left: 0px; } #top_right { margin-top: 20px; background: url(../images/top-right-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; right: 0px; } #top_center { margin: 0px 30px; } #top_center_bg { background: url(../images/top-mid-bg.png) repeat-x; width: 100%; height: 30px; } #top_center_bar { background: url(../images/top-mid-bar-bg.png) repeat-x; width: 100%; height: 90px; } /* Middle Layout */ #middle { min-height: 500px; margin: 0px; padding: 0px; } #middle_left { background: url(../images/middle-left-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; left: 0px; } #middle_right { background: url(../images/middle-right-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; right: 0px; } #middle_center { min-height: 100px; } /* Bottom Layout */ #bottom { background: #eee; min-height: 100px; } /* Left box Layout */ #left_box { width: 156px; position: absolute; left: 0px; min-height: 90px; z-index: 100; margin: 0px; padding: 0px; } #left_box_top { background: url(../images/left-box-top.png) no-repeat; width: 156px; height: 30px; position: relative; top: 0px; margin: 0px; padding: 0px; } #left_box_mid { background: url(../images/left-box-mid.png) repeat-y; position: relative; right: 0px; height: 100%; margin: 0px; padding: 0px; } #left_box_bottom { background: url(../images/left-box-bottom.png) no-repeat; width: 156px; height: 30px; position: relative; bottom: 0px; } #left_box_content { color: #FFF; margin-left: 20px; margin-right: 5px; font-size: 0.8em; } #left_box_content a { color: #FFF; } /* Content Area Styling */ #report { height: 100%; min-height: 400px; border: 1px solid #999; margin-left: 160px; margin-right: 30px; } #report_data { float: left; width: 775px; height: 100%; max-height: 400px; overflow: scroll; border: 1px dotted #ccc; margin: 10px; min-height: 100px; } /* Login Info box */ #login_info { background: url(../images/login-bar-bg.png) repeat-x; position: absolute; top: 79px; left: 40px; border: 1px solid #FFF; min-width: 250px; height: 44px; line-height: 44px; color: #FFF; }

and here's the HTML of the site.

Code:

<body> <div id="main"> <div id="top"> <div id="top_left"></div> <div id="top_center"> <div id="top_center_bg"> <div id="login_info">Logged in as: ricktest <a href="http://clients.activemd.net?action=logout">Log Out</a></div> <div id="top_nav"> <ul class="tabContainer"> <li> <a href="#" class="blue"> <span class="left"></span> <span class="mid">Inquiries</span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Engage <span class="left"></span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Manage <span class="left"></span> <span class="right"></span> </a> </li> </ul> </div> <div id="sub_nav"><a href="javascript:getdata('#middle_center', 'main/index.php');">Home</a> | <a href="javascript:getdata('#middle_center', 'forms/index.php');">Forms</a> </div> </div> <div class="clear"></div><div id="top_center_bar"></div></div> <div id="top_right"></div> </div> <div class="clear"></div> <div id="middle"><!--Here begins the first layer of dynamic content --> <div id="middle_left"></div> <div id="middle_center"></div> <div id="middle_right"></div> </div><!--Here ends the first layer of dynamic content --> <div class="clear"></div> <div id="bottom"> <div id="bottom_left"></div> <div id="bottom_center">Bottom</div> <div id="bottom_right"></div> </div> </div> </body>

The site is dynamic PHP, so I cant just throw a link in here. I hope this is enough information.

If anyone can help me with this, I would appreciate it.

Thanks.
Rick

Hi,

I am trying to use rounded corners for the top left and right of a div in safari, but i cannot work it out.

This is my code:

PHP Code:
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius:  5px 5px 0px 0px; 





the corners are fine in other browsers, but they appear square in safari. If I change this line to:

-webkit-border-radius: 5px;

then the corners are rounded. But how can I get just the top left and top right corners to be rounded?

Any ideas would be great.

Thanks