howtothings.co.uk

How to create rounded / curved boxes

This is a quick tutorial on how to make rounded or curved boxes on your MyBB forum.

This method can be used on a variety of sections, as it is here on mcompute, including but not limited to:

• #panel
  
• .thead
  
• .tcat
  
• .trow1
  
• .trow2
  

All of the above templates can be found in your global.css style sheet in your admin control panel.

To get to your global.css file, go to:

• ACP
  
• Templates & Styles
  
• *your theme*
  
• global.css
  

From inside here, look up what section you want to change and add these two lines of code into the css.

[code=css]-moz-border-radius: 6px;
-webkit-border-radius: 6px;[/code]

So, an end result would be similar to this:

[code=css].tcat {
background: #555555;
color: #FFFFFF;
font-size: 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}[/code]


Here's an example of it in action on mcompute, all of the arrowed images have this css applied.

[spoiler][/spoiler]


*Please note! Because IE sucks the boxes will not appear curved, this only works in proper web browsers such as Firefox and chrome. I also think Safari.