Curved edges.

[DanUK]

Hello.

we are currently using the following CSS for a simple 'message type' box:


.toprow {
padding: 15px;
background-color: #f6f6f6;
border: 1px solid #b9b9b9;
text-align: center;
}
.toprow p {
margin: 0px;
padding: 0px;
}


To have the 'curved' edges on the border, would we have to create images? Or is there a way to do that with CSS, I've never really looked at it before!

If so, is there an easy way to do curved edges in a graphics package?

Many thanks.

[felgall]

CSS2 does not contain an option for curved borders. The Mozilla based browsers have an add-on to define curved corners but that is only recognised in those browsers. For something that works in all browsers use images.

[Master00]

You probably will have to use images to get the border effect.

See if this works in your browser. It is curved corners in pure CSS. It is acheived by carefully posting text bullets. This is as good as it gets at the moment. I am sure they will work on improving this in the near future. It may not work in all browsers, I havn't checked.

Rounded Corners in Pure CSS (http://www.markschenk.com/cssexp/roundedbox/arrows.html)

[pear]

Rounded corners:

http://pro.html.it/esempio/nifty/