﻿{"id":430,"date":"2009-03-23T05:09:00","date_gmt":"2009-03-23T05:09:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=430"},"modified":"2009-03-23T05:09:00","modified_gmt":"2009-03-23T05:09:00","slug":"border-radius-create-rounded-corners-with-css","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/","title":{"rendered":"Border-radius: create rounded corners with CSS!"},"content":{"rendered":"<p>W3C has offered some new options for borders in CSS3, of which one is <a href=\"http:\/\/www.w3.org\/TR\/2005\/WD-css3-background-20050216\/#the-border-radius\"><code>border-radius<\/code><\/a>. Both Mozila\/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.  One of the most talked about aspects of CSS3 is  border-radius property. Rounder corners can be created independently  using the four individual border-radius properties  (border-bottom-left-radius, border-bottom-right-radius,  border-top-left-radius, border-top-right-radius.) We can use  border-radius shorthand property for all four corners simultaneously. It  will take a single value for all the four corners.<\/p>\n<p>This is an example:<\/p>\n<p><\/p>\n<div style=\"-moz-border-radius: 10px 10px 10px 10px; background-color: #f0f4ea; border: 1px solid rgb(97, 128, 49); padding: 20px;\">Mozilla\/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.<\/div>\n<p>The code for this example above is actually quite simple:<\/p>\n<div style=\"-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(237, 246, 224); border: 2px solid rgb(97, 128, 49); padding: 5px;\"><\/p>\n<pre><div style=\" background-color: #ccc;<br \/>-moz-border-radius: 5px;<br \/>-webkit-border-radius: 5px;<br \/>border: 1px solid #000;<br \/>padding: 10px;\" ><\/pre>\n<p><\/div>\n<p>These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. <code>-moz-border-radius-topright<\/code> as opposed to <code>-webkit-border-top-right-radius<\/code>:<\/p>\n<div style=\"-moz-border-radius-topleft: 10px; border: 1px solid rgb(240, 244, 234); padding: 5px;\">Mozilla\/Firefox and Safari 3 users should see a box with a rounded left upper corner.<\/div>\n<div style=\"-moz-border-radius-topright: 10px; border: 1px solid rgb(50, 82, 0); padding: 5px;\">Mozilla\/Firefox and Safari 3 users should see a box with a rounded right upper corner.<\/div>\n<p><\/p>\n<div style=\"-moz-border-radius-bottomleft: 10px; border: 1px solid rgb(50, 82, 0); padding: 5px;\">Mozilla\/Firefox and Safari 3 users should see a box with a rounded left lower corner.<\/div>\n<div style=\"-moz-border-radius-bottomright: 10px; border: 1px solid rgb(50, 82, 0); padding: 5px;\">Mozilla\/Firefox and Safari 3 users should see a box with a rounded right lower corner.<\/div>\n<div style=\"-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(237, 246, 224); border: 2px solid rgb(97, 128, 49); padding: 5px;\">These are handled by \/ should be handled by:<\/p>\n<div style=\"-moz-border-radius: 10px 10px 10px 10px; background-color: white; border: 1px solid rgb(97, 128, 49); padding: 20px;\">\n<ul>\n<li><code>-moz-border-radius-topleft <\/code> \/ <code>-webkit-border-top-left-radius<\/code><\/li>\n<li><code>-moz-border-radius-topright <\/code> \/ <code>-webkit-border-top-right-radius<\/code><\/li>\n<li><code>-moz-border-radius-bottomleft <\/code> \/ <code>-webkit-border-bottom-left-radius<\/code><\/li>\n<li><code>-moz-border-radius-bottomright <\/code> \/ <code>-webkit-border-bottom-right-radius<\/code><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>Each border-corner properties will take either one or two values( it may a constant value or percentage).<\/p>\n<p><b>See the example:<\/b><br \/><code>border-top-left-radius: 20px;           \/\/ Single value <\/code><br \/><code>border-top-left-radius: 20px 30px;  \/\/ taking separate values<\/code><br \/><code>border-top-left-radius: 5% 10%;       \/\/ take percentage<\/code><\/p>\n<p>The following diagram gives a graphical representation of the first 2 examples:<\/p>\n<div style=\"clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;\"><img decoding=\"async\" border=\"0\" height=\"100\" data-src=\"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png\" width=\"400\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 400px; --smush-placeholder-aspect-ratio: 400\/100;\" \/><\/div>\n<p>If one of the values is zero, the corner wont be rendered as rounded corner. It will be a squared one.<\/p>\n<p>We can use border-radius shorthand property define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four constants or percentages.<\/p>\n<p><b>Example:<\/b><br \/>border-radius: 4px 8px 2px 6px \/ 8px 4px 6px 2px;<br \/>border-radius: 10px;<br \/>border-radius: 10px 15px \/ 10px; <\/p>\n<p>The first set of values define the horizontal radius for all four corners. An optional second set of values, preceded by a \u2018\/\u2019, define the vertical radius for all four corners. If only one set of values are given; these are used to determine both the vertical and horizontal equally.<\/p>\n<p>If all four values are given, these represent the top-left, top-right, bottom-right and bottom-left radius respectively. If bottom-left is omitted from the given set, its value is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is given it is used to set all four radii equally.<\/p>\n<h3>\u00a0<\/h3>\n<h3>The -moz- prefix and -webkit- prefix <\/h3>\n<p>While Internet Explorer doesn&#8217;t support many (or any) advanced CSS properties, you can get started using Firefox and any of the &#8216;Mozilla&#8217; family of browsers. Apple&#8217;s WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.<\/p>\n<p>Mozilla\u2019s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners.<\/p>\n<h3>\u00a0<\/h3>\n<h3>Here are the CSS and browser-specific attributes<\/h3>\n<table border=\"1\" cellpadding=\"2\" cellspacing=\"2\" style=\"border: medium none; margin: 0pt; outline: medium none; padding: 0pt;\">\n<tbody>\n<tr>\n<th style=\"padding-right: 2em; text-align: left;\">CSS3 Specification<\/th>\n<th style=\"text-align: left;\">Mozilla equivalent<\/th>\n<th style=\"text-align: left;\"><i>WebKit<\/i> equivalent<\/th>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><i>border<\/i>-top-right-<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">-moz-<i>border<\/i>&#8211;<i>radius<\/i>-topright<\/td>\n<td style=\"text-align: left;\">&#8211;<i>webkit<\/i>&#8211;<i>border<\/i>-top-right-<i>radius<\/i><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><i>border<\/i>-bottom-right-<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">-moz-<i>border<\/i>&#8211;<i>radius<\/i>-bottomright<\/td>\n<td style=\"text-align: left;\">&#8211;<i>webkit<\/i>&#8211;<i>border<\/i>-bottom-right-<i>radius<\/i><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><i>border<\/i>-bottom-left-<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">-moz-<i>border<\/i>&#8211;<i>radius<\/i>-bottomleft<\/td>\n<td style=\"text-align: left;\">&#8211;<i>webkit<\/i>&#8211;<i>border<\/i>-bottom-left-<i>radius<\/i><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><i>border<\/i>-top-left-<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">-moz-<i>border<\/i>&#8211;<i>radius<\/i>-topleft<\/td>\n<td style=\"text-align: left;\">&#8211;<i>webkit<\/i>&#8211;<i>border<\/i>-top-left-<i>radius<\/i><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><i>border<\/i>&#8211;<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">-moz-<i>border<\/i>&#8211;<i>radius<\/i><\/td>\n<td style=\"text-align: left;\">&#8211;<i>webkit<\/i>&#8211;<i>border<\/i>&#8211;<i>radius<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Some Examples<\/h3>\n<div style=\"clear: both; text-align: left;\"><img decoding=\"async\" border=\"0\" height=\"290\" data-src=\"http:\/\/2.bp.blogspot.com\/_017MRInn4m4\/TGj30qplISI\/AAAAAAAAIXg\/PTkRKX-dWFA\/s400\/border-radius-1.png\" width=\"555\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 555px; --smush-placeholder-aspect-ratio: 555\/290;\" \/><\/div>\n<div style=\"clear: both; text-align: left;\"><img decoding=\"async\" border=\"0\" height=\"334\" data-src=\"http:\/\/2.bp.blogspot.com\/_017MRInn4m4\/TGj4DUKyZqI\/AAAAAAAAIXo\/orsNoWPhBtU\/s400\/border-radius-2.png\" width=\"555\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 555px; --smush-placeholder-aspect-ratio: 555\/334;\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila\/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. One of the most talked about aspects of CSS3 is border-radius property. Rounder corners can be created independently using the four individual &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[370],"tags":[],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-personal-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Chayilyam, north malabar, Theyyam stories %<\/title>\n<meta name=\"description\" content=\"Cultural Stories of North Malabar, Kasaragod, Kerala.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chayilyam, north malabar, Theyyam stories %\" \/>\n<meta property=\"og:description\" content=\"Cultural Stories of North Malabar, Kasaragod, Kerala.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0d1a\u0d3e\u0d2f\u0d3f\u0d32\u0d4d\u0d2f\u0d02\" \/>\n<meta property=\"article:published_time\" content=\"2009-03-23T05:09:00+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png\" \/>\n<meta name=\"author\" content=\"Rajesh Odayanchal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajesh Odayanchal\" \/>\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:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/\"},\"author\":{\"name\":\"Rajesh Odayanchal\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#\\\/schema\\\/person\\\/e52e7ee6b7cb47827e6d00b2db5ba3b7\"},\"headline\":\"Border-radius: create rounded corners with CSS!\",\"datePublished\":\"2009-03-23T05:09:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/\"},\"wordCount\":542,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/4.bp.blogspot.com\\\/_017MRInn4m4\\\/TGj1W4UW7qI\\\/AAAAAAAAIXY\\\/lTXfx4lUxT8\\\/s400\\\/border-radius.png\",\"articleSection\":[\"Personal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/\",\"url\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/\",\"name\":\"Chayilyam, north malabar, Theyyam stories %\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/4.bp.blogspot.com\\\/_017MRInn4m4\\\/TGj1W4UW7qI\\\/AAAAAAAAIXY\\\/lTXfx4lUxT8\\\/s400\\\/border-radius.png\",\"datePublished\":\"2009-03-23T05:09:00+00:00\",\"description\":\"Cultural Stories of North Malabar, Kasaragod, Kerala.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#primaryimage\",\"url\":\"http:\\\/\\\/4.bp.blogspot.com\\\/_017MRInn4m4\\\/TGj1W4UW7qI\\\/AAAAAAAAIXY\\\/lTXfx4lUxT8\\\/s400\\\/border-radius.png\",\"contentUrl\":\"http:\\\/\\\/4.bp.blogspot.com\\\/_017MRInn4m4\\\/TGj1W4UW7qI\\\/AAAAAAAAIXY\\\/lTXfx4lUxT8\\\/s400\\\/border-radius.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/border-radius-create-rounded-corners-with-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Border-radius: create rounded corners with CSS!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#website\",\"url\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/\",\"name\":\"\u0d1a\u0d3e\u0d2f\u0d3f\u0d32\u0d4d\u0d2f\u0d02\",\"description\":\"\u0d06\u0d38\u0d41\u0d30\u0d24\u0d3e\u0d33\u0d19\u0d4d\u0d19\u0d7e\u0d15\u0d4d\u0d15\u0d4a\u0d30\u0d3e\u0d2e\u0d41\u0d16\u0d02\",\"publisher\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#organization\",\"name\":\"Chayilyam\",\"url\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/malabar-theyyam-chayilyam-01.jpg\",\"contentUrl\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/malabar-theyyam-chayilyam-01.jpg\",\"width\":724,\"height\":352,\"caption\":\"Chayilyam\"},\"image\":{\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/rajeshodayanchal\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/odayanchal\\\/\",\"https:\\\/\\\/myspace.com\\\/odayanchal\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/odayanchal\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/rajeshodayanchal\\\/\",\"https:\\\/\\\/ml.wikipedia.org\\\/wiki\\\/User:Rajeshodayanchal\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/#\\\/schema\\\/person\\\/e52e7ee6b7cb47827e6d00b2db5ba3b7\",\"name\":\"Rajesh Odayanchal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g\",\"caption\":\"Rajesh Odayanchal\"},\"sameAs\":[\"http:\\\/\\\/odayanchal.com\"],\"url\":\"https:\\\/\\\/chayilyam.com\\\/stories\\\/author\\\/Rajesh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chayilyam, north malabar, Theyyam stories %","description":"Cultural Stories of North Malabar, Kasaragod, Kerala.","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:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/","og_locale":"en_US","og_type":"article","og_title":"Chayilyam, north malabar, Theyyam stories %","og_description":"Cultural Stories of North Malabar, Kasaragod, Kerala.","og_url":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/","og_site_name":"\u0d1a\u0d3e\u0d2f\u0d3f\u0d32\u0d4d\u0d2f\u0d02","article_published_time":"2009-03-23T05:09:00+00:00","og_image":[{"url":"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png","type":"","width":"","height":""}],"author":"Rajesh Odayanchal","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rajesh Odayanchal","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#article","isPartOf":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/"},"author":{"name":"Rajesh Odayanchal","@id":"https:\/\/chayilyam.com\/stories\/#\/schema\/person\/e52e7ee6b7cb47827e6d00b2db5ba3b7"},"headline":"Border-radius: create rounded corners with CSS!","datePublished":"2009-03-23T05:09:00+00:00","mainEntityOfPage":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/"},"wordCount":542,"commentCount":0,"publisher":{"@id":"https:\/\/chayilyam.com\/stories\/#organization"},"image":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#primaryimage"},"thumbnailUrl":"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png","articleSection":["Personal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/","url":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/","name":"Chayilyam, north malabar, Theyyam stories %","isPartOf":{"@id":"https:\/\/chayilyam.com\/stories\/#website"},"primaryImageOfPage":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#primaryimage"},"image":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#primaryimage"},"thumbnailUrl":"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png","datePublished":"2009-03-23T05:09:00+00:00","description":"Cultural Stories of North Malabar, Kasaragod, Kerala.","breadcrumb":{"@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#primaryimage","url":"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png","contentUrl":"http:\/\/4.bp.blogspot.com\/_017MRInn4m4\/TGj1W4UW7qI\/AAAAAAAAIXY\/lTXfx4lUxT8\/s400\/border-radius.png"},{"@type":"BreadcrumbList","@id":"https:\/\/chayilyam.com\/stories\/border-radius-create-rounded-corners-with-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/chayilyam.com\/stories\/"},{"@type":"ListItem","position":2,"name":"Border-radius: create rounded corners with CSS!"}]},{"@type":"WebSite","@id":"https:\/\/chayilyam.com\/stories\/#website","url":"https:\/\/chayilyam.com\/stories\/","name":"\u0d1a\u0d3e\u0d2f\u0d3f\u0d32\u0d4d\u0d2f\u0d02","description":"\u0d06\u0d38\u0d41\u0d30\u0d24\u0d3e\u0d33\u0d19\u0d4d\u0d19\u0d7e\u0d15\u0d4d\u0d15\u0d4a\u0d30\u0d3e\u0d2e\u0d41\u0d16\u0d02","publisher":{"@id":"https:\/\/chayilyam.com\/stories\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/chayilyam.com\/stories\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/chayilyam.com\/stories\/#organization","name":"Chayilyam","url":"https:\/\/chayilyam.com\/stories\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chayilyam.com\/stories\/#\/schema\/logo\/image\/","url":"https:\/\/chayilyam.com\/stories\/wp-content\/uploads\/2014\/11\/malabar-theyyam-chayilyam-01.jpg","contentUrl":"https:\/\/chayilyam.com\/stories\/wp-content\/uploads\/2014\/11\/malabar-theyyam-chayilyam-01.jpg","width":724,"height":352,"caption":"Chayilyam"},"image":{"@id":"https:\/\/chayilyam.com\/stories\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/rajeshodayanchal\/","https:\/\/www.linkedin.com\/in\/odayanchal\/","https:\/\/myspace.com\/odayanchal\/","https:\/\/in.pinterest.com\/odayanchal\/","https:\/\/www.youtube.com\/user\/rajeshodayanchal\/","https:\/\/ml.wikipedia.org\/wiki\/User:Rajeshodayanchal"]},{"@type":"Person","@id":"https:\/\/chayilyam.com\/stories\/#\/schema\/person\/e52e7ee6b7cb47827e6d00b2db5ba3b7","name":"Rajesh Odayanchal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/571858cd105e113dec906bf8458a9405cad24b0cc9cad29ff9e7475229be2d69?s=96&d=mm&r=g","caption":"Rajesh Odayanchal"},"sameAs":["http:\/\/odayanchal.com"],"url":"https:\/\/chayilyam.com\/stories\/author\/Rajesh\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6W","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}