{"id":12,"date":"2009-11-24T19:12:31","date_gmt":"2009-11-24T18:12:31","guid":{"rendered":"http:\/\/blog.gocept.com\/?p=12"},"modified":"2012-12-03T15:11:36","modified_gmt":"2012-12-03T14:11:36","slug":"adding-round-corners-to-boxes-using-css-and-javascript","status":"publish","type":"post","link":"https:\/\/blog.gocept.com\/2009\/11\/24\/adding-round-corners-to-boxes-using-css-and-javascript\/","title":{"rendered":"Adding round corners to boxes using CSS and JavaScript"},"content":{"rendered":"<p><a href=\"http:\/\/www.curvycorners.net\/\">Curvycorners<\/a> has a way to make gorgeous\u00a0roundings to your boxes without having to split each box into pieces of background images. You simply need to include one JavaScript file and add two lines of CSS code to your box (or to the box&#8217;s class definition).<\/p>\n<p>First, include the <a href=\"http:\/\/www.curvycorners.net\/includes\/curvycorners.js\">curvycorners javascript file<\/a> in the <em>head<\/em> part of your webpage.<\/p>\n<p>Then, add the following lines to the box that should get round corners. Here you can also customize the radius:<\/p>\n<div id=\"_mcePaste\" style=\"padding-left:30px;\">-moz-border-radius: 3px;-webkit-border-radius: 3px;&nbsp;<\/p>\n<\/div>\n<p>That&#8217;s all, the result looks like this:<\/p>\n<div style=\"background-color:#454545;color:#efefef;width:200px;text-align:center;margin-left:40px;padding:5px 15px;\">A box with curvy corners.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Curvycorners has a way to make gorgeous\u00a0roundings to your boxes without having to split each box into pieces of background images. You simply need to include one JavaScript file and add two lines of CSS code to your box (or to the box&#8217;s class definition). First, include the curvycorners javascript file in the head part &hellip; <a href=\"https:\/\/blog.gocept.com\/2009\/11\/24\/adding-round-corners-to-boxes-using-css-and-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Adding round corners to boxes using CSS and JavaScript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2072375,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[10221],"tags":[169,457],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pFP3y-c","jetpack-related-posts":[{"id":1510,"url":"https:\/\/blog.gocept.com\/2015\/01\/19\/manage-javascript-dependencies-with-fanstatic\/","url_meta":{"origin":12,"position":0},"title":"Manage JavaScript dependencies with Fanstatic","author":"","date":"January 19, 2015","format":false,"excerpt":"Until the beginning of this year, we were using Fanstatic to manage dependencies to external JavaScript libraries. In case you are not familiar with Fanstatic, here is a short overview. I will discuss benefits and drawbacks later on. How it works Imagine you want to use jQuery in one of\u2026","rel":"","context":"In &quot;en&quot;","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1525,"url":"https:\/\/blog.gocept.com\/2015\/03\/06\/manage-javascript-dependencies-with-bowerstatic\/","url_meta":{"origin":12,"position":1},"title":"Manage JavaScript dependencies with BowerStatic","author":"","date":"March 6, 2015","format":false,"excerpt":"Last month I explained how to use Fanstatic to manage JS dependencies. Since we were more and more displeased by using Fanstatic, we recently switched to BowerStatic, the new kid on the block. Since the setup is a bit more complicated and you need more tools to have the same\u2026","rel":"","context":"In &quot;en&quot;","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":230,"url":"https:\/\/blog.gocept.com\/2012\/09\/27\/autumn-developer-bbq\/","url_meta":{"origin":12,"position":2},"title":"Autumn Developer BBQ","author":"","date":"September 27, 2012","format":false,"excerpt":"Our second meet\/talk\/barbecue event was last week, and we think it was even better than the first one. In the unconference part, these were the topics we talked about: Demo of batou, the deployment tool Django Sentry: centralized error-logging DRBD vs. NFS vs. Sheepdog Beautiful Javascript Thanks to everyone who\u2026","rel":"","context":"In &quot;en&quot;","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":280,"url":"https:\/\/blog.gocept.com\/2012\/11\/30\/notizen-aus-dem-norden\/","url_meta":{"origin":12,"position":3},"title":"Notizen aus dem Norden","author":"","date":"November 30, 2012","format":false,"excerpt":"Heute neigt sich unser diesj\u00e4hriger Sprint dem Ende. Am Dienstag sind wir gen Norden auf die Insel R\u00fcgen gefahren, um uns f\u00fcr 3 Tage intensiv dar\u00fcber zu unterhalten, wie wir in Zukunft Software entwickeln wollen. Der Fokus lag dabei auf der Client-Seite, also dem Teil der Anwendung, der im Browser\u2026","rel":"","context":"In &quot;de&quot;","block_context":{"text":"de","link":"https:\/\/blog.gocept.com\/category\/de\/"},"img":{"alt_text":"Das gocept-Team","src":"https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2012\/11\/011.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2012\/11\/011.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2012\/11\/011.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2012\/11\/011.jpg?resize=700%2C400 2x"},"classes":[]},{"id":197,"url":"https:\/\/blog.gocept.com\/2012\/07\/06\/our-first-developer-bbq\/","url_meta":{"origin":12,"position":4},"title":"Our first developer BBQ","author":"","date":"July 6, 2012","format":false,"excerpt":"We invited\u00a0developers and sysadmins to join us for talking shop and barbecuing last Friday. Even though several people had signed up and said they wanted to come, at first none of the guests seemed to arrive. But after an hour and braving some ugly traffic jams on the way here,\u2026","rel":"","context":"In &quot;en&quot;","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":127,"url":"https:\/\/blog.gocept.com\/2012\/01\/30\/sprint-fruits-gocept-exttest-and-gocept-package\/","url_meta":{"origin":12,"position":5},"title":"Sprint fruits: gocept.exttest and gocept.package","author":"","date":"January 30, 2012","format":false,"excerpt":"The whole company spent three days in Kloster Dr\u00fcbeck sprinting on internal tools and topics. We overhauled our workflow for generating invoices and identified steps that we could automate. We polished and released gocept.exttest, which integrates for example JavaScript unittest to Python's unittest framework. In a nutshell, it allows you\u2026","rel":"","context":"In &quot;en&quot;","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2012\/01\/6754824273_981f3a0c34.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/12"}],"collection":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/users\/2072375"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":17,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/12\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}