CSS rounded corners on an inline element
While working on the recent 512 Pixels "Linked List" feature launch, I found myself running into a CSS3 stumbling block: I needed to apply rounded corners to an inline element (specifically a span). The fix was pretty easy, but not immediately obvious.
Note and spoiler: I don't use display: inline-block here, which, yes, is normally the right way to go. Here's why it doesn't work for this scenario.
The PHP I wrote that detected whether or not a 512 Pixels post was a link-lost post ended up generating markup that looked more or less like this:
The idea was to have the <span class="glyph" href="web.html">»</span> line, which generates the little double-arrow, append the end of the post titles. Since the post titles can be whatever length Stephen's heart desires, this <span> (like most spans) needed to be an inline element.
The problem, however, was the corners didn't want to round on an inline element:
In fact, the rounded corners would only work if I hit the element with a display: block;...
Or a float: left;...
And, obviously, neither of those were acceptable solutions.
I was scratching my head on this for a while—and considering attempting to fix it by crapping out some pretty unforgiveable HTML—when it hit me.
position: absolute;
I gave it a shot, and sure enough, it did exactly what I needed: the CSS3 corners rounded, and since I wasn't setting a position value like top or bottom, the element floated naturally at the end of the title, as if it were an inline element.
Here's the final CSS, in case you're interested:
Add a comment