Simple CSS rounded corners for your forum [no images]

[SEOvB]

With this simple CSS you can give your forum that look you always wanted. Sick and tired of the old bland square design every where in vBulletin? Well fear no more, because here's your rounded edges.

In your style of choice, go to add the following into the Additional CSS:

.rc{display:block}
.rc *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.rc1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.rc2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.rc3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.rc4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.rc5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.rcfg{
background:#000000}


Then in your header, at the very top enter:

<div>
<b class="rc">
<b class="rc1"><b></b></b>
<b class="rc2"><b></b></b>
<b class="rc3"></b>
<b class="rc4"></b>
<b class="rc5"></b></b>

<div class="rcfg">


Then in footer at the very bottom put:

</div>

<b class="rc">
<b class="rc5"></b>
<b class="rc4"></b>
<b class="rc3"></b>
<b class="rc2"><b></b></b>
<b class="rc1"><b></b></b></b>
</div>


That will make a black box, with white background, just change the colors in the CSS to match your forum, and you're set!

[saman]

very nice thanks

at which css and line exatcly should we add the code?

[Boofo]

Does this work with all browsers?

[SEOvB]

I've only tested on IE7 and 6, and Firefox as thats all i have access to, if anyone has another browser and could test it, that'd be great

[Boofo]

You should attach a text file with the instructions in case someone wants to redo this on their site sometime. ;)

[tschai]

Works like a charm...

[Tefra]

<a href="http://www.spiffycorners.com/" target="_blank">spiffy corners</a>

[cassis2k]

spiffy corners (http://www.spiffycorners.com/)

Thank you for this link

[iyihost]

thanks

[queueposition]

Very nice ! Thanks Heaps, could this be applied to other boxes ?

[Astroholic]

Which file do I add the top coding to?

[elmati]

yeah! im using spiffy corners on my site :)
it's works in every browser

but, as i see the best way tu make rounded corners is:
http://www.editsite.net/blog/rounded_corners.html

dont worry about js, cause vbulletin require js to work property :)

[Lizard King]

Why there is no credit to the original creator within the first post ?

[Playa82]

live demo ?

[kj_202]

sounds nice :)

[Preech]

KJ, I'm no genius, designer or coder. But try playing the css box in your style editor. radius and some number. I'm not to sure. But I'll see if I can make something happen for you. I know most people use images.

[eternal_]

my site has a determined width - not 100% dependent on screen size. How can I add to the css a width of this css centered on the page to follow the rest of the table widths?

[Alexey?]

This is nice.
Tnx

[MaR?]

Not workin on defoult style v3.8.2

[Simon Lloyd]

Not workin on defoult style v3.8.2

Works fine!, i'm using 3.8.3 and it worked when i tried it, i have removed it now as its not for me, maybe you didnt put the code in the correct places.