Comments on: Rounded Corners Without Images

By: akshay

akshay — Wed, 27 Jul 2011 16:39:45 +0000

Hi guys this is what I use thought I’d share as its simple and less code.

just add it to your style sheet

box-shadow: 0 0 5px rgba(51, 51, 51, 0.3);
-moz-box-shadow: 0 0 5px rgba(51, 51, 51, 0.3);
-webkit-box-shadow: 0 0 5px rgba(51, 51, 51, 0.3);
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

Your welcome :)

By: Kavita

Kavita — Wed, 27 Apr 2011 16:37:28 +0000

I want to create rounded tables for my blog and just stumbled upon the right content. Thanks for the great tutorial

By: php rounded corners

php rounded corners — Fri, 21 May 2010 16:54:50 +0000

superb Joshua!

this is a very good tutorial to read/learn

By: ???????????? ?????? ?????? ??? CSS 3.0 « Artycreate 4developers blog

???????????? ?????? ?????? ??? CSS 3.0 « Artycreate 4developers blog — Wed, 19 May 2010 08:16:28 +0000

[...] ????? ??? ????????, ?? ????? ?????????, ???? ????????: http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/ ? ?????? . ???? ?? ?????? ????????? ? ?? ???????, ????? [...]

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.