Walker News

Pure CSS Rounded Corner Syntax Without JavaScript or Image

You might have spotted some visual changes Walker News. Although my WordPress theme is still not XHTML compliant and even encounters errors + warnings during CSS validation, it’s still “best view” in most modern web browser (I guess). Needless to say, not everyone likes it, the lousy WordPress theme mod by a CSS dummy :-).

OK, there is no change visually for Internet Explorer users (even using the latest IE 8). But for those who are browsing Internet with the latest Apple Safari, Mozilla Firefox, or Google Chrome web browser (maybe Opera web browser too), enjoy the “visual experience”.

Yes, that rounded corner of border style for some of the HTML elements used in this WordPress theme, i.e. PRE tag, BLOCKQUOTE, and DIV tag (for author’s comment), as shown in these screenshots:

Using pure CSS syntax to create rounded corner of border style.

Only CSS syntax to create rounded corner of border style, without using JavaScript or image.

The pure CSS syntax used to create rounded corner of border style (without using JavaScript or image):
        -moz-border-radius:18px;
        -webkit-border-radius:18px;
        -opera-border-radius:18px;
        -khtml-border-radius:18px;
        border-radius:18px;

Disadvantage:
  • Except border-radius, the rest are browser-specific CSS syntax that are not in W3C CSS level 3 draft.
     
  • border-radius will be available in CSS level 3, which is stills under development.
    CSS 3 includes all features of CSS 2, with addition of demanding features like new selectors, fancy borders, and backgrounds, vertical text, user interaction, speech…

     
  • None of the Microsoft Internet Explorer in market recognizes any one of these rounded corner CSS syntax or the border-radius recommended by W3C working draft 15 Oct 09 (not even the latest version IE 8):
    While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8.

    Microsoft is committed to providing a browser that accurately supports Web standards. In Internet Explorer 8, we shipped several features from HTML5 and CSS3. Our primary goal was implementing CSS 2.1 (a specification that has reached final candidate stage) completely and correctly before moving on to specifications that are still in development and may change. [ Rounded Corners in Internet Explorer ]

     
  • Not all non-IE web browsers support border-radius related syntax, but the the latest version of Apple Safari, Google Chrome, Mozilla Firefox (and perhaps Opera web browser) are rendering rounded corner of border style accordingly.

For more information on how to implement CSS rounded corner, at this time being, before the final CSS 3 specs confirmed by W3C – Make CSS Rounded Corners, CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients, Spiffy Corners: Generate CSS and HTML for anti-aliased corners without using images or javascript, CSS Rounded Corners Roundup.

Custom Search

  1. Cristian Dorobantescu 02-12-10@19:19

    If you’re not looking exclusively for a non JS/image solution, then you could have a look at Flexi Panels CSS – the Dreamweaver extension that makes rounded corner CSS without coding.

2017  •  Privacy Policy