Comments on: CSS3 Goodies: Borders and Backgrounds

By: Kurt Todoroff

Kurt Todoroff — Tue, 20 Nov 2007 21:01:38 +0000

Hi Mark,

In my attempt to keep my postings terse, I have unfortunately misled you.
Here is the exact code that I added to my CSS to generate rounded corners.

#tociphotograph{
padding: 10px;
margin: 10px 10px 35px 10px;
background-color: #FFFFFF;
border: 1px solid #3366FF;
-webkit-border-radius: 10px solid #3366FF;
-moz-border-radius: 10px solid #3366FF;
}

After I read your first reply to my query, I revised the code by removing
“solid” and “#3366FF” to read as follows:

#tociphotograph{
padding: 10px;
margin: 10px 10px 35px 10px;
background-color: #FFFFFF;
border: 1px solid #3366FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

The second implementation in my style sheet solved the problem. The rounded corners
look wonderful.

By the way, will “-moz-xxx” take care of Firefox?

Thank you for your help.

Kurt Todoroff

By: Mark Rowe

Mark Rowe — Tue, 20 Nov 2007 19:54:16 +0000

@Kurt: Take a look at http://www.css3.info/preview/rounded-border/ for an example of how to use border-radius. The [-webkit-]border-radius property is only for specifying the “roundness”. You must still make use of the border property to set the border width, line style and colour.

By: Kurt Todoroff

Kurt Todoroff — Tue, 20 Nov 2007 19:51:11 +0000

I see what I have done wrong. When I enclose information within
the HTML open and close carets, the entire content is ignored and
not posted.

I’ll remember that.

By: Kurt Todoroff

Kurt Todoroff — Tue, 20 Nov 2007 19:47:08 +0000

Hi Mark,

Thank you for your prompt response. My apologies again. My posting should
have read:

to my HTML as follows:

Safari renders nice rounded corners.

On to the CSS code. I reviewed the specification for the syntax of border-radius.
Are you (and the spec) suggesting that I should not include the code:

“solid #3366FF”

because border-radius will inherit these attributes from #tociphotograph{}?

I just deleted this code from my CSS and tried it again. The corners are still
square.

Perhaps I’m overlooking something, or I’m misinterpreting the specification.

Thank you for your help. I look forward to your next posting.

By: Mark Rowe

Mark Rowe — Tue, 20 Nov 2007 19:05:15 +0000

@Kurt: Take a look at the specification for the syntax of border-radius. It takes either one or two length values which specify the radii of the ellipse used when drawing the curved corner.

By: Kurt Todoroff

Kurt Todoroff — Tue, 20 Nov 2007 16:53:00 +0000

My apologies!

I meant to type:

I discovered this website a few days ago.

By: Kurt Todoroff

Kurt Todoroff — Tue, 20 Nov 2007 16:51:17 +0000

I discussed this websit a few days ago. Well Done!

I decided to try border-radius. I added the following code
to my cascading style sheet:

-webkit-border-radius

as follows:

#tociphotograph{
xxx: xxx;
yyy: yyy;
-webkit-border-radius: 10px solid #3366FF;
}

The object’s corners remain square.

However, when I removed this line from my CSS and then added:

-webkit-border-radius

to my HTML as follows:

Safari renders nice rounded corners.

Why doesn’t Safari recognize the code in the CSS?

Thank you.

By: CD

CD — Tue, 04 Apr 2006 11:23:45 +0000

I’ve found a problem with border-radius – maybe I should report a bug but I’m a newbie so I though I would post here.

It’s a slightly obscure one, but if you apply a border-radius to a div *and* set the dix to be content-editable, the border radiuses are incorrectly drawn as you add new lines of text (forcingrthe div to grow vertically).

It’s probably an easy one to fix 🙂

By: solo

solo — Fri, 09 Sep 2005 17:18:37 +0000

I very happy to see that CSS3 is being worked up (are you discussing these changes with the KHTML guys?)
But I ask myself, is it good to _expose to the public_ an implementation of an incomplete standard?
The standard could change before it is finalized and we would be left with an incompatible browser.
Or do you think to update Safari to the final CSS3 standard breaking the style sheets that will appear in the meantime (between next safari release and CSS3 finalization)?

By: Rolley

Rolley — Mon, 05 Sep 2005 03:22:02 +0000

I finally figured that webkit also accepts -moz-border-radius. Actually it seems safari uses the last xxxborder-radius instruction it parsed. My take is it should take border-radius over -moz-border-radius, whatever the order !

Exemple

.simple {
border-radius: 20px;
-moz-border-radius: 10px;

background: brown;
width: 100%;
height: 40px;
position: relative;
}

As is the border-radius will be of 10px.
Now inter-change the first two lines and put the border-radius: 20px second and the border-radius will be 20px.