Post by edenwax on Dec 12, 2010 19:17:25 GMT
Here is a CSS snippet in which you can easily round corners with no use of images at all.
I have used all three and they work well. However the last one isnt supported by some browsers yet. -moz is for Firefox, but seems to work in Chrome, IE 9, Safari and Opera.
-webkit is for WebKit browsers like Safari and Chrome. Not too sure if it works with all browsers, though.
Rounding Select Corners:
These select only round the top right and top left corners of the table or div. In order to change it just replace "topright" with bottomleft or bottomright etc. (it works the same for border-radius too)
For rounding select -webkit corners, things are a little different:
It's good to use all 3 rounding corner css for increased browser support. But you can get away with using -moz and -webkit since the last one isnt fully supported yet.
How to use in Proboards:
This gives your titlebar rounded top left and right corners. Note that you dont want all the corners of the titlebar rounded because it looks kind of goofy, but it's up to you.
To change what your adding corners to, replace .titlebg with any of the proboards classes such as: .catbg, .windowbg, .windowbg2, .menubg, .welcomebg, etc.
These are neat to play around with! Enjoy
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;I have used all three and they work well. However the last one isnt supported by some browsers yet. -moz is for Firefox, but seems to work in Chrome, IE 9, Safari and Opera.
-webkit is for WebKit browsers like Safari and Chrome. Not too sure if it works with all browsers, though.
Rounding Select Corners:
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
These select only round the top right and top left corners of the table or div. In order to change it just replace "topright" with bottomleft or bottomright etc. (it works the same for border-radius too)
For rounding select -webkit corners, things are a little different:
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px; It's good to use all 3 rounding corner css for increased browser support. But you can get away with using -moz and -webkit since the last one isnt fully supported yet.
How to use in Proboards:
.titlebg {
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
This gives your titlebar rounded top left and right corners. Note that you dont want all the corners of the titlebar rounded because it looks kind of goofy, but it's up to you.
To change what your adding corners to, replace .titlebg with any of the proboards classes such as: .catbg, .windowbg, .windowbg2, .menubg, .welcomebg, etc.
These are neat to play around with! Enjoy
