Comments on: Rounded Corners Without Images

By: IGRAFIQ - Blog » Blog Archive » Crear esquinas redondeadas con CSS y sin imagenes

Sun, 17 Jan 2010 16:35:45 +0000

[...] bonus track, os dejo esta otra manera, que como poco resulta muy curiosa, en la que consiguen la redondez utilizando un • (•) [...]

By: Crear esquinas redondeadas con CSS y sin imagenes

Crear esquinas redondeadas con CSS y sin imagenes — Fri, 08 Jan 2010 05:39:49 +0000

[...] bonus track, os dejo esta otra manera, que como poco resulta muy curiosa, en la que consiguen la redondez utilizando un • (•) [...]

By: ????? ??????

????? ?????? — Sun, 15 Nov 2009 23:57:36 +0000

???? ??????? ??????????. ??????? ???????. ? ????????? ???? ???? ?????? ???, ??? ?????? ??? – http://www.?????-??????.su, ???????? – ?? ?????????

By: Jason Green

Jason Green — Tue, 13 Oct 2009 12:07:05 +0000

We wrote an article on flexible rounded corners using only css here: http://blog.dynamic50.com/index.php/2009/08/rounded-corners/ any feedback would be much appreciated!

By: page2pagepro

page2pagepro — Fri, 18 Sep 2009 18:08:43 +0000

Great article.
In regards to sizing, I had some success modifying css to ems. Tested in Mozilla Firefox 3.5.3 and scales fairly well. Also by adding min-height you can eliminate the single-line capsule effect (unless you like the pill shape).

Here’s a small modification:

Rounded Box Demo

body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font-size: 1.0em;
font-family: Georgia;
}

div.rounded-box {
position:relative;
width: 9em;
background-color: #E6E6E6;
margin: 0.2em;
min-height:3.5em;
}

/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:1.14em; height:1.19em; background-color:#FFF; overflow:hidden;}

div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside {
position:relative; font-size:10em;
font-family:arial; color:#E6E6E6; line-height: 0.254em;
}

/*********************
SPECIFIC ATTRIBUTES
*********************/

div.top-left-corner { top:0; left:0; }
div.bottom-left-corner {bottom:0; left:0;}
div.top-right-corner {top:0; right:0;}
div.bottom-right-corner {bottom: 0; right:0;}

div.top-left-inside {left:-0.057em;}
div.bottom-left-inside {left:-0.057em; top:-0.125em;}
div.top-right-inside {left:-0.186em;}
div.bottom-right-inside {left:-0.186em; top:-0.125em;}

div.box-contents {
position: relative; padding: 0.5em; color:#000;
}

•
•

Scaling fix.

Downside:
By switching from pixels to ems, older IE (5.5, 6.0, etc) are enabled the ability for fast switching/scaling (ctrl+mousewheel). IE as expected looks terrible. One option would be to use Joshua’s code for IE and this alternate styling for Gecko-based/Mozilla. etc.

cheers!

By: Yuriy

Yuriy — Tue, 18 Aug 2009 15:19:02 +0000

I think this approach is much simpler:

http://codecorner.galanter.net/2009/08/13/easy-rounded-corners-in-pure-htmlcss/

Just 3 classes/divs to create the effect.

By: ?p????e??e

?p????e??e — Tue, 18 Aug 2009 01:56:45 +0000

??????? ?? ?????????? ????? ??????. ? ? ??? ?? ?????? ????????, ?? ??? ????? ????? ?? ?????????????.

By: Matt

Matt — Sun, 19 Jul 2009 01:27:02 +0000

Nice technique however those pain in the rear images have been replaced with pain in the rear CSS and div tags. Since most users are on high speed connections of DSL and greater a 1KB background image is not an issue and it’s easier to code.

By: sai reddy

sai reddy — Mon, 29 Jun 2009 17:16:17 +0000

superb Joshua!

this is a very good tutorial to read/learn

By: Tom George

Tom George — Wed, 24 Jun 2009 15:15:45 +0000

Thanks a lot!! it meet my requirement :)