CODEWITHSUNDEEP
cssborder
vkGunasekaran
vkGunasekaran

Reputation: 6814

curved border in css


I want to make design css like this
---------------------U-----|
I couldn't draw exact design here. but the U shape width should be expanded to fit home about links. is it possible?

Upvotes: 0

Views: 923

Answers (5)

SilverHorn
SilverHorn

Reputation: 1026

Here is an example:

<style type="text/css">
div.test
{
width: 115px;
padding: 10px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>

Upvotes: 0

Rich
Rich

Reputation: 4992

If you want to remain compatible with older browsers, then you can't do it in css, you'll have to do it with graphics. IE 8 and below wont do it, not sure about other browsers but bear in mind border radius is quite new.

Upvotes: 0

Spudley
Spudley

Reputation: 168813

It's hard to decipher exactly what you're after just from that description. The text-mode demonstration doesn't really explain it very well :-)

This could maybe be achieved using CSS border-radius, but if I'm interpreting your request correctly, it sounds like quite a complex layout.

border-radius only does rounded corners -- ie the four corners of a box. So if you need more complex layout than that, you'd need to have several boxes with rounded corners, positioned appropriately to get the desired effect.

You may be able to achieve it with just rounded corners on the container box for the home/about links you mentioned. If this doesn't achieve what you need then it sounds to me more like you need a graphic than a CSS border.

If the CSS border-radius does work for you, bear in mind that the border-radius feature isn't supported on IE. The good news is that there is a hack for IE called CSS3Pie which fixes that, so you can use border-radius in all browsers.

Hope that works for you.

Upvotes: 3

Olical
Olical

Reputation: 41422

You can only do it with CSS3 but you can use things like spiffy corners instead.

Upvotes: 1

benhowdle89
benhowdle89

Reputation: 37504

http://border-radius.com/ CSS Border Radius Generator

Upvotes: 2

Related Questions