A rounded corner

April 13th, 2011. Tagged: CSS, IE, performance

Warning: not practical blog post, don't read, move on.

So this is a post about a thought I had - creating rounded corners in IE678 by using roundness that they already have built-in, meaning the character O.

But first:

  1. My opinion is that browsers that don't support border-radius should never ever get rounded corners. Let them rest in peace.
  2. Don't use the technique below, it's just a thought. Plus it only has one corner

Demo

Live page demo and a screenshot in IE6:

IE rounded corner

Sales pitch

  • Rounded corners in IE 6, 7, 8
  • No images
  • No JavaScript (a tiny self-rewriting CSS expression doesn't count)
  • No extra markup

The drawbacks later.

The big idea

Use the letter O in monospace and position it in the corner.

Implementation

Markup

As promised, nothing to see here:

<p>Hello world</p>

JavaScript

None. *

* The catch here is that a tiny piece of JavaScript exists as a CSS expression. It's there to trade for clean markup. You can remove it, but then you need a bit of extra markup.

CSS

p {
  /* blah-blah, border, padding... */
  border-radius: 16px; /* for good browsers */
  background-image: expression(...); /* IE[678] */
}

The expression goes like:

this.runtimeStyle.backgroundImage="none",this.innerHTML += "<b>O</b>"

(Expression stolen from Thierry, btw)

The first part of the expression overwrites itself for performance reasons. You know that expressions are bad, cause they execute too often. Well, this.runtimeStyle shuts down the expression. If you wonder, runtimeStyle is IE thing which makes styles even more specific than inline style attributes. And this refers to the HTML element, in our case the P.

The second part of the expression (note the , separator, that's kinda funny) updates the innerHTML of the P adding a B element. So the end result of running the expression at initial page load is DOM like:

<p>Hello world<b>O</b></p>

And if you prefer, you can put that markup and get rid of the CSS expression.

The rest of the CSS is just wrestling to position the O in the corner:

b {
  background: white;
  display: block;
  font-family: monospace;
  font-size: 72px;
  font-weight: bold;
  height: 41px;
  left: -18px;
  overflow: hidden;
  position: relative;
  top: -74px;
  width: 25px;
}

And this is it.

Drawbacks

I'm sure my critical readers can think of drawbacks but let me start:

  • In general principle, why would you care about rounded corners in browsers that don't know about border-radius?
  • You can't have different background inside and outside the box, because you can't style the inside of the O with a color different than the outside. However you might be able to find a character that can.
  • Playing with font sizes and positions is tricky. However there's probably a better way to position the O
  • If you managed to select text outside the "hello world" (if you do Select-All for example) to copy, you'll paste "hello worldO" :) Which is exactly what screen readers will read and your page might sound like a weirdO

So there

Maybe someone else have already thought of the idea of using a character as a corner (and has a better implementation), but that's all from me. I'm not recommending this approach, just an itch I needed to put out there. Thanks for reading!

Tell your friends about this post: Facebook, Twitter, Google+

23 Responses

  1. There’s this guy http://jonraasch.com/blog/css-rounded-corners-in-all-browsers who took a different approach to IE rounded corners using HTC behavior. It does not work in all cases though and has some weird rendering effects at times.
    As you said, hardly practical.

  2. Perhaps you could use multiple backgrounds to do all four corners. Also, to solve the accessibility issue, use the ARIA presentation role: <b role=”presentation”>O</b>

  3. I tried this on IE9 and set browser mode as IE7 => IE crashes (Windows 7 and quad core processor)

  4. Philip, role=”presentation” just removes the element from the accessible tree, not the text content. Maybe aria-hidden=”true” does what you want, although the spec was inconsistent about how aria-hidden should work and I don’t know what the current status is.

  5. Just love the self-deleting CSS expression idea.

    Don’t think CSS expressions work in IE8 Standards mode though.
    http://msdn.microsoft.com/en-us/library/cc304082(v=vs.85).aspx#expressions

  6. IE8 supports pseudo-elements via the single colon syntax (i.e. :before instead of ::before), so the CSS expression technique could be reserved for IE67.

    Also, it should be possible to create four corners, by plugging four elements instead of one and then using position:absolute to shoot one in each corner of the containing box (that would require to include class names).

    unicode characters like “upper left quadrant circular arc” [1] etc. would be perfect for the job but I don’t think these show in IE.

    As a side note, I noticed that it is not possible to rely on the “_property” hack to sandbox expressions for IE6 as IE seems to pick up the expression no matter what. For example, if I recall, IE67 see this: selector {whatever:expression();}

    Thanks for the credit :)

    [1] http://www.fileformat.info/info/unicode/char/25DC/index.htm

  7. Yah, recall a similar post on habrahabr: http://habrahabr.ru/blogs/css/64016/

    Guy was using bullet symbols: • •. In comments though, the consensus is that this method doesn’t work reliably across all platforms (different platforms needs different adjustments)

  8. It does not work on IE8.

  9. Interesting experiment. For those looking for a practical CSS3 polyfill, I highly recommended http://css3pie.com/ It’s still a beta, but I’m using it in a production app to reduce the number of border images needed for various elements.

  10. What are you doing supporting IE6 ?, if your not one of us, your one of them ! the IE6 crew….

    makes me sick….

    let it die, i’m currently whinging about IE7…. i want that to die….

  11. I appreciate you sharing the experiment. But more so because you explained the (im)practicalities of the experiment too. Far too many people don’t give context and instead it’s just “hey here’s a neat idea I had”. But I think exercises like this can be useful for getting us to think differently.

  12. What a wonderfully mad idea!

  13. Good thought, but not very practical and with the creation of CSS Pie, I don’t need to hack to get IE fixed anymore

  14. IE6 deserves to DIE!!!!!….(7 and 8 too)

  15. Funny crazy idea! I liked it. Obviously it is not practical, but it made me smile. :)

  16. lovley ideea, I hope I6 will die soon

  17. Awesomely Crazy Idea but kinda useless(as you mentioned at the top of the post already ). As developers we should stop support of lower versions of IE. With chrome getting near to 50% of browser share, the web is moving to a better place

  18. I agree we shouldn’t be supporting older versions of IE. I think with HTML 5 that we should be using those techniques.

    http://www.familiestogether.us

  19. [...] Aside: A crazy experiment probably around that time was the idea if using the letter O for rounded corners. [...]

  20. I am still a bit confused why CSS is bad….

  21. I hope this will be a wake up call for those ‘who cares’ browsers!

  22. Out of the box thinking !
    I don’t understand why the developers of the browsers don’t get fresh ideas. This was a good one.
    Thanks for sharing.

  23. Heya i am for the first time here. I came across this board and I find It really useful
    & it helped me out much. I hope to give something back and aid others like you helped me.

Leave a Reply