{"id":2856,"date":"2012-05-16T23:41:04","date_gmt":"2012-05-16T18:11:04","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2856"},"modified":"2012-05-16T23:41:04","modified_gmt":"2012-05-16T18:11:04","slug":"css-3-tutorial-rounded-corner-and-shadow-border-effect","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/css-3-tutorial-rounded-corner-and-shadow-border-effect\/","title":{"rendered":"CSS 3 Tutorial – Rounded Corner and Shadow Border effect"},"content":{"rendered":"

Previously we have seen the Transform Operations using CSS3<\/a>. In this article i will depict the New Border Properties in CSS 3. With the help of CSS 3, we can perform following two operations on border :<\/p>\n

    \n
  1. Rounded Corner\/ Border<\/li>\n
  2. Border Shadow<\/li>\n<\/ol>\n

    Live Demo \u2013 Click Here<\/a><\/h3>\n

    1. Rounded Corner<\/strong><\/p>\n

    Before CSS3, if you wanted to create the rounded corner border then it was not the straight job, it needed lots of\u00a0programming\u00a0stuff. There were alternatives like using sprite of images or jQuery plugins etc. However with the help of CSS 3 it is very straight as simple as shown below:<\/p>\n

    \nborder-radius:25px;\n-moz-border-radius:25px; \/* Firefox 3.6 and earlier *\/\n<\/pre>\n
    Using Border-radius property we can achieve the result. But for IE first line will work and for Mozilla 2nd line of code will work from above code snippet.<\/p>\n
    \"CSS<\/a>
    CSS 3 Border - Rounded Corner<\/figcaption><\/figure>\n
    2. Border Shadow<\/strong>
    \nIf you want to give some shadow effect to the borders then its what everyone was waited for:
    \n<\/strong><\/em><\/p>\n
    Syntax :<\/strong> <\/em><\/p>\n
    box-shadow: h-shadow v-shadow blur spread color inset;<\/em><\/p>\n
    \nbox-shadow: 5px 5px 10px #888888;\n<\/pre>\n
    \"CSS<\/a>
    CSS 3 Border - Shadow<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Style the Border in HTML with the Help of CSS 3 Border Style<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[67,68],"class_list":["post-2856","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-css-3"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5639,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/twitter-like-button-as-salesforce-lightning-component-pure-css3-with-video\/","url_meta":{"origin":2856,"position":0},"title":"Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video","author":"Jitendra","date":"August 3, 2016","format":false,"excerpt":"Building Lightning component checkbox to have Twitter's Heart like animation without any image or JavaScript.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Twitter Heart Animation using pure CSS3","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":594,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-gradient-header-using-css\/","url_meta":{"origin":2856,"position":1},"title":"Create Gradient Header using CSS","author":"Jitendra","date":"July 6, 2010","format":false,"excerpt":"Create a Gradient effect in heading tag of HTML using simple CSS trick","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Create attractive headers in HTML using CSS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/07\/header.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5843,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","url_meta":{"origin":2856,"position":2},"title":"Circular Progress Bar – Salesforce Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5717,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","url_meta":{"origin":2856,"position":3},"title":"Flipcard Lightning Component","author":"Jitendra","date":"September 8, 2016","format":false,"excerpt":"A simple CSS based animated Flip card Lightning Component for beginners","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flipcard Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5861,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-with-conditional-theme-salesforce-lightning-component\/","url_meta":{"origin":2856,"position":4},"title":"Circular Progress Bar with Conditional Theme \u2013 Salesforce Lightning Component","author":"Jitendra","date":"December 20, 2016","format":false,"excerpt":"Salesforce Lightning Component - Circular Progress Bar with Conditional Theme. Ready to be used by Developers and Admins on App builder for any object. No External Javascript Library, Lightweight CSS based.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Circular Progress Bar v2","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2753,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/complete-css-3-tutorial-transform-operations\/","url_meta":{"origin":2856,"position":5},"title":"Complete CSS 3 Tutorial – Transform Operations","author":"Jitendra","date":"March 5, 2012","format":false,"excerpt":"Complete CSS 3 Tutorial - Transform Operations - rotate, translate, scale, skew and matrix methods with Live Demo and source code","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"CSS 3 Tutorial Rotate","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2856"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2856\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}