Hello tcw7
CSS3 just adds a bunch of additional styling features to CSS, It is written the same as the older version of CSS
Some CSS3 Features do not work in all browsers. Rounded corners do not work in Internet explorer less than version 9
Here site I like to use for getting rounded corner code.
http://border-radius.com/
For an example of a simple rounded corner div
<div class="content">
<p>Look mom, I am rounded!</p>
</div>
.content{
height:300px;
width:300px;
background-color:red;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Make sure you are targeting the correct element you want to have the rounded corners with the correct class or id.
Hope this helps!
Thread Starter
tcw7
(@tcw7)
Thanks simalam,
Do you load this in the style.css page?
Thread Starter
tcw7
(@tcw7)
Whoops…just loaded in the 2010 theme “style.css” folder.
…and its not working (sigh).
Sorry I should have been more specific. Place the css part in the style.css of your the current active theme
.content{
height:300px;
width:300px;
background-color:red;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
And the html in one of the templates you are viewing
<div class="content">
<p>Look mom, I am rounded!</p>
</div>
Test to see if you get a red box on the page. If not try a differn’t class name. Your styles “.content” could be getting overwritten by another style in the CSS file.
Once you get a red box with rounded corners working, try a different element in your theme and find out what class or id it’s using and try giving it rounded corners.
Thread Starter
tcw7
(@tcw7)
thanks simalam!
Which file would you make the HTML change?
Thank you!
