Rounded Borders

pyedorosh · April 17, 2008 at 10:38 PM

Hi!

How I make rounded borders with CSS to show in IE and Firefox?

Thanks,
Pedro

pyedorosh · April 20, 2008 at 3:42 PM

Three days and any answer?

lucasmx · May 18, 2010 at 10:02 PM

I wish to have this answer too... I do not understand very well CSS codes but i didnt find anything related on the rounded themes..

Poisé cara infelizmente o suporte aqui no fórum é fraco.. Pior que comprei a versao mais básica, sem suporte..

ArtGeek · May 18, 2010 at 10:25 PM

CSS

-moz-border-radius: 5px; /*FireFox Mozilla*/
-webkit-border-radius: 5px; /*Safari and Chrome*/
-o-border-radius: 5px; /*Opera - Works?*/

lucasmx · May 24, 2010 at 11:09 PM

thank you for your help but i had no success..

Im trying to make every box of my style rounded...
I dont know CSS very much..

Do i have to use the "-"? Or i must put a point before?
Will it make everything rounded?

Can someone explain me that code on Addidional CSS Codes that says:

/* rounded completely 5px */
.message, .messageInner, .quoteBox, fieldset, .info, .success, .warning, .error, .help, #userCard, .userCardInner, .second .border, .second .border .content, .avatarSelect li.container-4, .avatarSelect li label, .floatedElement, .popupMenu, .loginPopup, .loginPopup .container-1 {-webkit-border-radius: 5px; -moz-border-radius: 5px;}

what do i have to edit to get it rounded?

thank you!

Okan Esen · May 26, 2010 at 1:59 PM

Tip: Take a look at the Blue Sunrise Style

lucasmx · May 28, 2010 at 1:20 PM

I did, but Blue Sunrise Style isnt full rounded...

Anyway, i found it on Crystal theme CSS code..

All i wanted was this:

.largeButtons a, .largeButtons li { -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.infoBox { -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.searchContainer { -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#mainContainer {-webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;}

.category .border {-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px;}

#boardlist .border {-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px;}

.copyright { -webkit-border-radius: 5px; -moz-border-radius: 5px;}

Just put it on Additional CSS and you will get everything rounded..

Thank you guys

Eagle1281 · May 28, 2010 at 1:39 PM

Rounded corner in Opera, it's a joke oO ?

Black Rider · May 28, 2010 at 5:29 PM

Quote from GhostKilla

Rounded corner in Opera, it's a joke oO ?

No, simply use the border-radius
It is supported by Opera.

Eagle1281 · May 29, 2010 at 1:57 PM

not work in opera, a svg file is required for have rouded corner in Opera, not only css ...

Netzwerg · May 29, 2010 at 2:21 PM

Quote from GhostKilla

not work in opera, a svg file is required for have rouded corner in Opera, not only css ...

I'm sorry, but you are mistaken. The latest version of opera does support the CSS3 property "border-radius".

There is no need to mess up with SVG Files....

http://www.css3.info/opera-adds-sup…-2d-transforms/
http://dev.opera.com/articles/view/…ound-boxshadow/

Participate now!