# rounded corners in css



## aconite (Feb 1, 2006)

hi,

I am using images for my rounded corner, below is the css and html, when I test it, it looks strange.

CSS

#roundcont {
width:290px;
background-color:#bfdceb;
color:#000000;
}
#roundcont p {
margin 0 10;
}
#roundtop {
background:url(../images/tr.gif) no-repeat; 
}
#roundbottom {background:url(../images/br.gif) no-repeat; 
}
img.corner {
width:39px;
height:39px;
border:none;
display:block !important;
}

HTML










0. Home
1. Evolution, fitness and adaptations
2. The origins of the designing brain
3. The evolutionary origins of aesthetics
4. Artefacts, symbolism and narrative
5. How humans engage with artefacts:
a provisional model 
6. Consequences
Illustrations
Bibliography
Webography
Site Map









br=bottom right, bl=bottom left, tr=top right, tl=top left

This is what I want the sidebar to look like.
Any help will be appreciated

thanks


----------



## jaymanson (Mar 18, 2007)

Hi again 

Glad you had a go with the rounded corners. Here's a simpler way to code it with only 2 images:

HTML

```
0. Home
		1. Evolution, fitness and adaptations
		2. The origins of the designing brain
		3. The evolutionary origins of aesthetics
		4. Artefacts, symbolism and narrative
		5. How humans engage with artefacts:
		a provisional model 
		6. Consequences
		Illustrations
		Bibliography
		Webography
		Site Map
```
CSS

```
#roundcont {
	width: 285px;
	height: auto;
}

#roundtext {
	width: 285px;
	background-color: #BFDCEB;
	border-left: solid #909DA4 2px;
	border-right: solid #909DA4 3px;
}

#roundtext p {
	margin: 0;
	padding: 0 10px 0 10px;
}

#roundtop {
	width: 290px;
	height: 15px;
	background: url("../images/top.gif") no-repeat top left;
}

#roundbottom {
	width: 290px;
	height: 15px;
	background: url("../images/bottom.gif") no-repeat top left;
```
Everything is contained in the roundcont div, with the top and bottom images always fixed in those positions, and the text area free to stretch vertically depending on the contents. I've not styled the text in any way in this example.

Hope this helps again,

Jay


----------



## aconite (Feb 1, 2006)

jay,

once again you have been very helpful, I'm sure I will learn a lot from this

thanks


----------



## aconite (Feb 1, 2006)

jay,

is there a way of indenting the second line so adaptations is in line with evolution?
I want #roundtop and #roundbottom not to be fixed in that position, is there a way of moving #roundtop down about 10px 
is there also a way of moving #roundtext {
border-left: solid line } in a bit

thanks


----------



## jaymanson (Mar 18, 2007)

> I want #roundtop and #roundbottom not to be fixed in that position, is there a way of moving #roundtop down about 10px


Every part of that rounded rectangle is in the roundcont div, so just add something like _padding: 10px 0 0 10px;_ to #roundcont in the css - that'll move it away from the top and left sides.



> is there a way of indenting the second line so adaptations is in line with evolution?


You know the text line is going to break with the font size, so let's break it ourselves! Change the HTML to suit your layout and add a span, eg:

_1. Evolution, fitness and 
adaptations
_

Then just add a few lines to your css:

_#roundtext p span {
margin-left: 30px;
}_

You can change the margin to anything you want and use this span for the same effect anywhere inside that group.



> is there also a way of moving #roundtext {border-left: solid line } in a bit


Not sure where that mis-alignment is coming from? Still works fine in my browsers! Check your code against mine and if you can't see the problem, post it up for me and I'll have a look


----------



## aconite (Feb 1, 2006)

jay,

what browsers are you testing on, I'm using firefox
fixed the mis-alignment, I didn't crop the roundtop & roundbottom close enough.
what I am trying to do now is make #copyright & the solid line move down as I enter content, not quite sure if it is to do with #wrapper, #copyright , #body, I added height:auto but that doesn't seem to do it

CSS

body {
background-color: #e2dfc2;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, "Arial Black";
}
#wrapper {
background-color: #ffffff;
height:auto;
width: 800px;
margin-right:auto;
margin-left:auto;
}
#maincontent {
background-color: #ffffff;
height: 900px;
width: 65%;
float:right;
}
#copyright {
background-color: #ffffff;
height:auto;
width: 100%;
font-size:x-small;
border-top:solid #000000 thin;
}
#copyright p {
padding:0 0 0 0.7cm;
}

HTML

*

EVOLUTION, ARTEFACTS, MEANING AND DESIGN:*

*The extent to which evolutionary theory can explain how and why humans attribute significance and meaning to the material world and the consequences of this for understanding design *





A thesis submitted for the degree of 
Doctor of Philosophy
by
Raymond Kenneth Batchelor



Department of Critical Theory and Practice
Faculty of Design
Buckinghamshire Chilterns University College
Brunel University
October 2004


----------



## jaymanson (Mar 18, 2007)

Hi,

Sorry - just on quick tonight so fairly short post  If you structure your page like so, you should get what you want:

header
title
content
>>rounded container (left float)
>>main text (right float)
copyright

so if you make a content div with an auto height, and nest the roundcont and maincontent divs inside, this will stretch the content div. With the copyright placed after that, it will always stay beneath the content regardless of size.

PS - I use Firefox, Opera, IE7 and IE6 and generally test my code in all 4 before I am happy.


----------



## aconite (Feb 1, 2006)

jay,

can't seem to make the left side of the template stretch, don't know what I am doing wrong

CSS
#roundcont {
width:256px;
height:auto;
padding:10px 0 0 10px;
float:left;
}
#content {
height: auto;
}
#maincontent {
background-color: #ffffff;
height: 900px;
width: 65%;
float:right;
}

HTML

*Evolution, Artefacts, Meaning & Design*



0. Home
1. Evolution, fitness and adaptations
2. The origins of the designing brain
3. The evolutionary origins of aesthetics
4. Artefacts, symbolism and narrative
5. How humans engage with artefacts:a provisional model 
6. Consequences
Illustrations
Bibliography
Webography
Site Map



© Ray Batchelor 2007

thanks once again


----------

