Tag: border-radius
Nabin Nepal (Starx) border-radius css firefox
April 6, 2012

border-radius bug with <a> tag in Firefox on Mac

Question by Blowski

BlowskiBlowski

In Firefox, when I put border-radius on an <a> tag, I’m getting little white lines. appearing between the text and the edge of the element. If I zoom in, they disappear.

I tried putting it on JSFiddle, but it’s not replicating the issue.

Does anyone recognise the issue visually?

The whole page is here: http://www.danblows.com/.

The bit adding the border radius is, but just putting the same code onto JSFiddle doesn’t replicate the issue.

.cta, .cta:visited  {
    background-color:#000000;
    border-radius:5px;
    border:10px solid #000000;
    color:#FFFFFF;
}

Screengrab of issue

Answer by Starx

StarxStarx

Link cannot display block properties properly. Give your anchor a display: inline-block;

.cta { display: inline-block; }

TESTED ๐Ÿ™‚

Nabin Nepal (Starx) border-radius css css3
May 26, 2011

Absolute positioned image in border radius wrapper

Question by Johan Wallberg

Johan WallbergJohan Wallberg

I have a wrapper with border radius. Inside the wrapper I have a absolute positioned image in the top right corner. My problem is that the image doesn’t crop/hide under the wrapper with border radius. I’ve tried overflow:hidden on the wrapper but it doesn’t work. See image below.

enter image description here

Answer by Starx

StarxStarx

Image tag is not affected by border-radius.

Your best bet is to use the picture as a background like:

<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>

The element(in above example a div) should contain the size of the actual image), and unless you use CSS3, the image cannot be resized like <img> tag

Nabin Nepal (Starx) border-radius css css3 html
December 7, 2010

The most semantic way of making this container

Question by theorise

theorisetheorise

I want to make the following shape using divs and border radius, with fall back to square corners for old browsers. No images please.

I am having a bit of trouble making the bottom corner next to the title (highlighted with the red box). I don’t want a lot of unnecessary divs, it has to be as simple and semantic as possible.
alt text

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

Any ideas?

EDIT 1:

I did it like this: http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

EDIT 2:

I am going to use this method: http://jsfiddle.net/a93Rb/13/

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won’t accept it as an answer as I stated that I do not want images.

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer by alxx

alxxalxx

My idea was white rounded div with dark background under bottom left corner. (I can’t get it to work myself, so it would be great to see result ๐Ÿ™‚ )

Answer by Starx

StarxStarx

Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.

...

Please fill the form - I will response as fast as I can!