Rounded corners no image

[harryd]

I am trying to do a news style box for my first site.

 

Example from tutorial.

http://www.html.it/articoli/nifty/nifty4js.html

 

here is the style from tutorial

 

Rounded("div#header","transparent","#C3D9FF","small");

Rounded("div#box","#FFF","#E4E7F2");

 

How can I add this style to mine.

 

#content {

float: left;

width: 506px;

height: 630px;

padding: 10px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

.col1, .col2 {

float: left;

width: 230px;

height: 200px;

margin: 0px 15px 15px 0px;

}

.clear: { clear: both;

width: 100%; height: 0;

visibility: none;

}

 

Thanks for your help

[JBall]

Well, for sure you will need to add this in between your

tags in your HTML

 

And you'll need to add this to your CSS:

div.news{width: 250px;background: #F0F0E7;margin-bottom: 20px}
h3{font-size: 100%;margin:0;padding: 0 0 3px;background: #FFC5FF;color: #000;text-align: center}
p{margin:0;padding: 5px 10px;line-height: 1.3;text-align: justify}


.rtop,.rbottom{display:block}
.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}

 

You'll need to tweak for size and color. Other than that just give whatever div you want to have rounded corners a class of "news" and you should be golden.

Edited February 17, 2009 by JBall

[harryd]

Thanks JBall,

 

I followed your instruction. I am doing something wrong.

 

here is my div

 

New

Test

 

Thanks again

[harryd]

I added HTML tags.

 

I would really be happy if I could make rounded corners with no image work

here is the css and is not working.

 

div.news{

width: 230px;

background: #F0F0E7;

margin-bottom: 20px;

color: #000000;

background-color: #FFFFFF;

}

h3{font-size: 100%;margin:0;padding: 0 0 3px;color: #DF0000;text-align: center; font:bold}

h4{font-size: 100%;margin:0;padding: 0 0 3px;background: #BAFF75;color: #000;text-align: center}

p{

margin:0;

padding: 5px 10px;

line-height: 1.3;

}

 

 

.rtop,.rbottom{display:block}

.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}

.r1{margin: 0 5px}

.r2{margin: 0 3px}

.r3{margin: 0 2px}

.r4{margin: 0 1px;height: 2px}

 

.rs1{margin: 0 2px}

.rs2{margin: 0 1px}

 

Thanks

harryd

[Wickham]

There's another javascript curved corners method here:-

http://www.curvycorners.net/examples/demos/demo.html