MyBB Community Forums

Full Version: Best way to round corners on a UL without border-radius?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Does anybody know how I can get my UL menu to have rounded corners without using CSS3?

Like most of my other rounded corner items I just use position: relative and absolute with rounded corner images, but I can't put spans or divs or anything directly inside a UL tag. It has to be inside the LI.

Anyone know a solution?
Well, theres a theme that uses css code for rounded corners, its called DefaultRounded.

The code:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 5px;

Thats the one for '#container, you just edit the radius'.
(2010-05-17, 07:34 PM)Joshee Wrote: [ -> ]Does anybody know how I can get my UL menu to have rounded corners without using CSS3?
Oh, I thought it said "with using css3", my bad.
Take a look at IPB3's menu & topic control buttons and you'll see.
there are several possibilities, how bout this one
http://www.alistapart.com/articles/slidingdoors/
long story short: one image is applied to the <li>, the other to the <a>, so it works only for menus where the list items are clickable links...
(2010-05-17, 11:07 PM)Scoutie44 Wrote: [ -> ]Take a look at IPB3's menu & topic control buttons and you'll see.

I don't see it. For almost everything they use CSS3 border radius and I can't see how the do it with the menu.
(2010-05-17, 11:16 PM)frostschutz Wrote: [ -> ]there are several possibilities, how bout this one
http://www.alistapart.com/articles/slidingdoors/
long story short: one image is applied to the <li>, the other to the <a>, so it works only for menus where the list items are clickable links...

I know how to put the corners on the LI, I need to put them on the UL.
Background Image?
That wouldn't work if the menu will have to expand depending on the amount of list items in it.
Basically if you wrap the UL in a DIV, the DIV has a background image with the left being only as wide as necessary;

http://community.invisionpower.com/publi..._hover.png
(far left bit)

Then the UL has a background with the right half (see above) wide enough to accommodate wide resolutions and a left margin which accommodates for the left BG image.
Pages: 1 2