CODEWITHSUNDEEP
css
Bill
Bill

Reputation: 19248

CSS3 border and with border-radius

I have encounter a problem with border and border radius.

the following is result in Chrome and Firefox, Chrome render the radius very smooth however firefox is not (same as IE), i have also attached my CSS below. It's a <a> tag

any help would be appreciated.

enter image description here

#dot{
    width: 20px;
    height: 20px;
    background: #e10000;
    color: #FFF;
    line-height: 20px;
    text-align: center;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: -5px;
    position: absolute;
    left: 40px;
    top: 12px;
    border: 1px solid #EAEAEA;
    text-indent: initial;
    opacity: 1;
    visibility: visible;
    font-size: 1.1em;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

Upvotes: 1

Views: 147

Answers (2)

hm_ngr
hm_ngr

Reputation: 171

dummy border

sample

wrap tag with and use difference of width and height instead of border

#dot_wrapper
, #dot_inner
{
    color: #FFF;
    line-height: 20px;
    text-align: center;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
/*
    border: 1px solid #EAEAEA;
*/
    text-indent: initial;
    opacity: 1;
    visibility: visible;
    font-size: 1.1em;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

#dot_wrapper
{
    background: #EAEAEA;
    width: 22px;
    height: 22px;
    left: 40px;
    top: 50px;
}

#dot_inner
{
    background: #e10000;
    width: 20px;
    height: 20px;
    left: 1px;
    top: 1px;
}

Upvotes: 2

stolli
stolli

Reputation: 5926

All the comments are more or less correct. The only way to achieve exactly cross-browser sameness is an image in this case. I recently sat in on a W3C panel session at the HTML5 dev conf in SF, CA, and this exact standard (border radius) was used as an example of the incredible complexity of standardizing even a simple feature like border radius. (Read the spec for a kick here: http://www.w3.org/TR/css3-background/#the-border-radius). Essentially Roko is correct, chrome implements the feature with anti aliasing, ie/ff do not, at least with the version/settings u are using.

Good news is that for a user who has these versions/settings, this is how border radii "just look" to them, so yours won't be offensively different to their eye.

I would leave it, and fret not a moment over it.

Upvotes: 1

Related Questions