da 40

I'm looking at using the CSS3 property 'outline' instead of border on a project.

Both Mozilla and Webkit browsers (Chrome, Safari) support 'outline'.

Mozilla supports '-mozilla-outline-radius'.

I can google and find mentions of '-webkit-outline-radius' but no official documentation. It also doesn't seem to work.

Anyone know if that's an official property webkit is supporting? Is there a different way to round 'outline' in webkit browsers?

2 answers

Jordan 469

Outlines have been expanded in CSS3 to include the outline-offset property. This allows the offset to be rendered away from the edge of the specified element. The offset is specified as outline-offset: 12px; and the outline as outline: 2px solid blue; . Here is a link for reference. CSS3 Outline

For more information regarding CSS3 properties you can visit CSS3 Properties

Answered over 8 years ago by Jordan
  • My question is about outine-radius, not outline-offset. da over 8 years ago
o.k.w 2355

Not that I know of, you might find some results while searching for it online but I've yet to see one in action.

Based on the typical webkit-specific CSS property naming convention (e.g. "-webkit-border-radius"), I've tried "-webkit-outline-radius" and it doesn't work. My bet is, it is not supported.

PS: "-mozilla-outline-radius" should be "-moz-outline-radius"

Answered over 8 years ago by o.k.w