{"id":19725,"date":"2014-04-02T13:01:30","date_gmt":"2014-04-02T05:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19725"},"modified":"2025-04-04T01:43:40","modified_gmt":"2025-04-03T17:43:40","slug":"css3-border-radius-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/","title":{"rendered":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions"},"content":{"rendered":"<p>CSS3 allows us to create rounded corners using the <code>border-radius<\/code> property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier versions. So, when you apply the CSS3 Border Radius to an element, it still appears as a box with sharp corners.<\/p>\n<p>There is a lot of advice online suggesting you ignore IE8. You might wish you could, but if you\u2019re working on a website for a government institution or a bank, you may not have that option. You still need to ensure the website looks as good in IE8 as it does in modern browsers, which includes the use of the CSS3 Border Radius.<\/p>\n<p>If you need to make your website compatible with IE8 while using CSS3 features, we have a useful tip for you.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" class=\"ref-block__link\" title=\"Read More: Beginner\u2019s Guide to CSS3 (Updated)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Beginner\u2019s Guide to CSS3 (Updated)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beginners-guide-to-css3.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9497 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beginners-guide-to-css3.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Beginner\u2019s Guide to CSS3 (Updated)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSince its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p><\n\n\n<\/p><h2>CSS3Pie<\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/css3pie.com\/\">CSS3Pie<\/a> is a type of polyfill for CSS3 decorative features. In addition to the CSS3 Border Radius we\u2019re discussing in this article, CSS3Pie also supports Box Shadow and Gradients, although it\u2019s limited to the <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">Linear Gradient<\/a> type.<\/p>\n<p>Download CSS3Pie <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/css3pie.com\/download\/\">here<\/a>. Place it in your project directory \u2013 I put it in the <strong>css<\/strong> folder. As shown in the screenshot below, I\u2019ve created one stylesheet and one HTML file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg\" height=\"120\" width=\"500\" alt=\"File structure screenshot\"><\/figure>\n<p>Open the stylesheet in your code editor and apply rounded corners to an element in the HTML file, like this:<\/p>\n<pre>\r\n.border-radius {\r\n  height: 100px;\r\n  width: 100px;\r\n  background-color: #2ecc71;\r\n  -webkit-border-radius: 50px;\r\n  -moz-border-radius: 50px;\r\n  border-radius: 50px;\r\n}\r\n<\/pre>\n<p>Since the element\u2019s width and height are both 100px, and the <code>border-radius<\/code> is set to 50px, the element will become a circle:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/a-circle.jpg\" height=\"210\" width=\"500\" alt=\"Circle shape screenshot\"><\/figure>\n<p>In IE8, as expected, it will still appear as a square, but don\u2019t worry.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/ie-border-radius-fail.jpg\" height=\"230\" width=\"500\" alt=\"IE border radius fail screenshot\"><\/figure>\n<p>To enable the rounded corner effect, add this line: <code>behavior: url(css\/pie.htc);<\/code>, like this:<\/p>\n<pre>\r\n.border-radius {\r\n  height: 100px;\r\n  width: 100px;\r\n  background-color: #2ecc71;\r\n  -webkit-border-radius: 50px;\r\n  -moz-border-radius: 50px;\r\n  border-radius: 50px;\r\n  behavior: url(css\/pie.htc);\r\n}\r\n<\/pre>\n<p>Note that the file path in <code>url()<\/code> must be either an absolute path or relative to the HTML file. You can also add this line in a separate file.<\/p>\n<p>If you have a stylesheet specifically for Internet Explorer, you can place <code>behavior: url(css\/pie.htc);<\/code> in that file, ensuring it\u2019s within the same CSS selector, like this:<\/p>\n<pre>\r\n\/* declared in ie.css *\/\r\n.border-radius {\r\n  behavior: url(css\/pie.htc);\r\n}\r\n<\/pre>\n<p>Refresh the page in IE8. The rounded corner should now be visible (ta-da!). It should work in IE7 as well.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/ie-border-radius.jpg\" height=\"230\" width=\"500\" alt=\"IE border radius success screenshot\"><\/figure>\n<h3>Troubleshooting<\/h3>\n<p>Internet Explorer may behave unexpectedly. If this does not work (e.g., the rounded corner does not appear, or the selected element disappears), adding the <code>position<\/code> and <code>zoom<\/code> properties should solve the problem:<\/p>\n<pre>\r\n.border-radius {\r\n  behavior: url(<?php echo get_template_directory_uri(); ?>\/css\/pie.htc);\r\n  position: relative;\r\n  zoom: 1;\r\n}\r\n<\/pre>\n<h2>Using CSS3 Pie in WordPress<\/h2>\n<p>You\u2019ve finished creating your website in HTML and used <strong>pie.htc<\/strong> to enable CSS3 in IE8. Now, you\u2019re ready to convert the website into a functional WordPress theme. Since WordPress is dynamic and pages can have different URL levels, we need to specify an absolute path.<\/p>\n<p>You can change the path in your CSS like this:<\/p>\n<pre>\r\n.border-radius {\r\n  behavior: url(http:\/\/localhost\/{website}\/wp-content\/themes\/{the_theme}\/css\/pie.htc);\r\n  position: relative;\r\n  zoom: 1;\r\n}\r\n<\/pre>\n<p>Or, you can add internal styles in <strong>header.php<\/strong> like this:<\/p>\n<pre>\r\n&lt;style&gt;\r\n.border-radius {\r\n  behavior: url(&lt;?php echo get_template_directory_uri(); ?&gt;\/css\/pie.htc);\r\n  position: relative;\r\n  zoom: 1;\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<h2>Final Thought<\/h2>\n<p>Making cool features like CSS3 Border Radius work in IE8 is exciting, and CSS3Pie helps achieve that, giving us one less reason to dislike IE8.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier versions. So, when you apply the CSS3 Border Radius to an element, it still appears as a box with sharp corners. There is a lot of advice online suggesting you ignore&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add CSS3 Border Radius Support in IE8 and Earlier Versions - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions\" \/>\n<meta property=\"og:description\" content=\"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-02T05:01:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:43:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions\",\"datePublished\":\"2014-04-02T05:01:30+00:00\",\"dateModified\":\"2025-04-03T17:43:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/\"},\"wordCount\":487,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-radius-in-internet-explorer\\\/file-structure.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/\",\"name\":\"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-radius-in-internet-explorer\\\/file-structure.jpg\",\"datePublished\":\"2014-04-02T05:01:30+00:00\",\"dateModified\":\"2025-04-03T17:43:40+00:00\",\"description\":\"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-radius-in-internet-explorer\\\/file-structure.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-radius-in-internet-explorer\\\/file-structure.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-radius-in-internet-explorer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions - Hongkiat","description":"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/","og_locale":"en_US","og_type":"article","og_title":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions","og_description":"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-04-02T05:01:30+00:00","article_modified_time":"2025-04-03T17:43:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions","datePublished":"2014-04-02T05:01:30+00:00","dateModified":"2025-04-03T17:43:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/"},"wordCount":487,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/","name":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg","datePublished":"2014-04-02T05:01:30+00:00","dateModified":"2025-04-03T17:43:40+00:00","description":"CSS3 allows us to create rounded corners using the border-radius property. However, this feature is not supported in Internet Explorer 8 (IE8) and earlier","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-radius-in-internet-explorer\/file-structure.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add CSS3 Border Radius Support in IE8 and Earlier Versions"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-589","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19725"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19725\/revisions"}],"predecessor-version":[{"id":73673,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19725\/revisions\/73673"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19725"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}