This technique is no longer needed – we have HTML5 and CSS3 and support for border-radius now.<\/p>\n
There are many techniques for putting rounded corners on a box. All of them require some deviation from the ideal of clean, semantic (X)HTML for structure, CSS for presentation and scripting for behaviour. <\/p>\n
The technique of placing corner images directly in a page goes against the idea that CSS should be used for presentation and reduces flexibility (no style-switching). Techniques that use JavaScript seem like overkill to me, and the resulting page code is often the same anyway. <\/p>\n
Best let CSS handle it. The cleanest and most concise way I have found uses four <div> elements to call the corner images from a stylesheet. <\/p>\n
Pretty straightforward. Using empty <div> elements for presentation like this looks a bit messy but I do not think it is incorrect. The comments are added because some browsers will add default dimensions to an empty <div>. The <div> elements are nested so that there is no need to declare a width on the classes.<\/p>\n","protected":false},"excerpt":{"rendered":" This technique is no longer needed – we have HTML5 and CSS3 and support for border-radius now. There are many techniques for putting rounded corners on a box. All of them require some deviation from the ideal of clean, semantic (X)HTML for structure, CSS for presentation and scripting for behaviour. The technique of placing corner […]<\/p>\n","protected":false},"author":183,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[10,11],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-css","tag-web-design-2"],"_links":{"self":[{"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/users\/183"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":8,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/posts\/10\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicursalpath.co.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div id="container">
\n<div class="nw"><!-- --><div class="ne"><!-- --><\/div><\/div>
\n<p>Content<\/p>
\n<div class="sw"><!-- --><div class="se"><!-- --><\/div><\/div>
\n<\/div><\/code><\/p>\nThe code for the stylesheet.<\/h2>\n
.nw, .ne, .sw, .se { height: 15px; }
\n.nw { background: url(nw.gif) no-repeat top left; }
\n.ne { background: url(ne.gif) no-repeat top right; }
\n.sw { background: url(sw.gif) no-repeat bottom left; }
\n.se { background: url(se.gif) no-repeat bottom right; }<\/code><\/p>\n