I suggest adding the following CSS to <kbd> tags (such as Space) so that the top right and bottom left corners do not look slightly odd.

Solution is to round those two corners in such a way that they do not exactly look rounded.

kbd { border-radius: 0 3px; -moz-border-radius: 0 3px; }

This produces: (Old on the left, new on the right)

Space (old) versus Space (new)

This slight change will make practical uses much better looking. While still preserving the layout of all the art that has been created.

  • I can see the difference when I compare the new and old styles side by side, but I don't think I would notice in any other case. – Pops Nov 28 '11 at 17:47
  • I just thought it looked a lot more 3-dimensional, where the other one looks like a bit sloppy. This I noticed right away the first time I saw the formatting used. I only just now thought of this tweak. I don't know what the policy is on small tweaks like this, but I thought I would mention it since it seems to be a one-liner. P.S. you could of course use 4px :) – 700 Software Nov 28 '11 at 17:52
  • Still too ugly for me. Ban <kbd>! – Arjan Nov 28 '11 at 17:56
  • +1 to this or something similar. Ask Different already adds a border-radius and a drop-shadow (example) and it looks good. – Jeremy Nov 28 '11 at 17:56
  • 3
    If you want a 3D effect, perhaps you'd be interested in the outset property instead? See also Can we have the nicer Apple SE/Ask Different <kbd> tag network-wide? – Pops Nov 28 '11 at 18:01
  • +1 for this. Definitely an improvement over the current style, but not a breaking design change. – Adam Maras Nov 28 '11 at 20:25
  • <kbd>, representing user input, should not render to look like keys at all. Like, according to the w3.org wiki: input "<kbd>Yes</kbd>" or "<kbd>No</kbd>". To represent actual keys, all <kbd>'s should be wrapped into a parent <kbd>... That looks even worse. – Arjan Dec 7 '11 at 13:14
  • @Arjan, I think the amount of people who care about having proper display of nested <kbd> tags is very small. But it is interesting to know what the original intent was. – 700 Software Dec 7 '11 at 14:25
  • I know, @George, still I was brave enough to boldly ask for downvotes, errr, Ban <kbd>, its usage and rendering are incorrect ;-) – Arjan Dec 7 '11 at 14:37
  • @Arjan, Are you insane? :) – 700 Software Dec 7 '11 at 21:12

Keyboard styles were adjusted on the trilogy and (hopefully) most SE 2.0 sites where we weren't already doing this.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .