CSS rounded corners.

Torniquet · Post by **Torniquet** » Tue Nov 10, 2009 7:15 pm

Ok i looked for ages for a decent corner rounding for divs and boxes.

and short of making a complete table to house images.... or several bulky divs to do it. i couldnt find anything

well atleast not untill today

it works lovely. only problem (and tbh one i am not overly bothered about) is that it only works on FF and webkit (safari). it also works on chrome but i dont know which ones that would fall under XD (but is not as nice as the first 2)

here is the website. http://www.the-art-of-web.com/css/border-radius/ (also shows you how to animate safari boxes aswell which is cool)

and here is a CSS example from my site.

.container{
width:900px;
background-color:#CCC;
border-style:ridge;
border-color:#000;
border-width:1px;
z-index:0;
-moz-border-radius: 10px; For mozilla
-webkit-border-radius: 10px; for webkit
border-radius: 10px; for CSS3 which i dont think is finished yet so its not needed yet, but might aswell add it in ready :p

}

you can also adit single or specific corners, and the site also shows you how to manipulate the settings for less traditional rounded corners.

Lord Strife · Post by **Lord Strife** » Tue Nov 10, 2009 7:30 pm

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

works in IE

Torniquet · Post by **Torniquet** » Tue Nov 10, 2009 9:32 pm

i did look at that. but i think its abit to bulky compared to the other, as you have to keep entering all that shit.

and quite frankly, I dont give a flying fig about IE. in all my years of web use, i have never found IE to be stable. its always crashing or failing to load.

Lord Strife · Post by **Lord Strife** » Tue Nov 10, 2009 9:38 pm

damn didnt mean to upset you , but concidering about 60% of the web users are on IE just figured it might be useful
you could always wrap it up and make a php functions to use it easy

Code: Select all

<?php
function startbox(){
    ?>
    <div id="nifty">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <?php
}

function endbox(){
    ?>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    <?php
}

startbox();
echo 'content for box';
endbox();

?>

Sakar · Post by **Sakar** » Wed Nov 11, 2009 5:16 am

Actually according to W3's statistics, roughly 40% of all users use some version of IE, while about 47% use Firefox

http://www.w3schools.com/browsers/browsers_stats.asp

Thanks for posting this Torniquet! Very nice to have this feature available. Will save me a lot of time in the future.

Falken · Post by **Falken** » Wed Nov 11, 2009 10:58 am

Sakar wrote:Actually according to W3's statistics, roughly 40% of all users use some version of IE, while about 47% use Firefox

http://www.w3schools.com/browsers/browsers_stats.asp

Thanks for posting this Torniquet! Very nice to have this feature available. Will save me a lot of time in the future.

Haha, read all information on the sources before posting them, as w3schools even say themself, that their numbers are not too reliable:

"W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users."

Sakar · Post by **Sakar** » Wed Nov 11, 2009 4:26 pm

Haha, oops. Oh well.

Post by **hallsofvallhalla** » Wed Nov 11, 2009 5:09 pm

Well just like the W3 answer the 80% is also skewed. Especially for this topic. That 80% includes businesses which do not take the time to install Firefox but instead use IE since it's pre-installed. They also do not allow installation from non IT employees so the end user at work is stuck with IE. More people actually use Firefox for personal use than IE.

I am not saying you shouldn't make your game IE compatible.

Falken · Post by **Falken** » Wed Nov 11, 2009 5:23 pm

hallsofvallhalla wrote:More people actually use Firefox for personal use than IE.

Wont believe that until you show me some numbers...When I worked with normal customer support and computer fixes for "ordinary" people I would say about 90% of them ONLY had IE installed. And honestly, 95% of the "ordinary" users don't give a damn about what they use, if it is open sourced or not, they want something that works ok and looks like they are used too, which IE does.

And today, there is no big difference between the browsers, and most people wouldn't detect the diffrence if they had the same skin

Post by **hallsofvallhalla** » Wed Nov 11, 2009 5:43 pm

that is so untrue. We never had Firefox on our Work computers until a email went out asking anyone in the company that would like to use FF instead of IE to send a email.

They had over 10,000 emails!

When you say "ordinary" you mean 60+ year old people and computer illiterate people. We are discussing a game here. Most people who play browser games are not "ordinary" people. Everyone I know, even my parents who are 60+ do not use IE. I guess it has a lot to do with geography and the types of people you are catering too.

All of my games are non IE compatible and I have never had a issue. Every now and then someone will complain but when I tell then its not IE compatible they say ah I will use opera or Firefox.

Do not get me wrong, IE is used by tons of users but to say 95% is waaaaaaay off. There are more mac users than that. Even 80% is way off.

CSS rounded corners.

CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.

Re: CSS rounded corners.