{"id":831,"date":"2010-12-18T10:19:44","date_gmt":"2010-12-18T09:19:44","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=831"},"modified":"2011-01-10T17:29:45","modified_gmt":"2011-01-10T16:29:45","slug":"css3-border-radius-arrotonda-gli-angoli","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/","title":{"rendered":"CSS3 Border Radius: arrotonda gli angoli"},"content":{"rendered":"
\n<\/div>

\"CSS3<\/a><\/p>\n

Il CSS3<\/strong> \u00e8 l’evoluzione del CSS, un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. L’evoluzione di questo linguaggio st\u00e0 sconvolgendo positivamente la materia del Web Designer, che fin ora lavorava quasi esclusivamente con le immagini e che oggi, per favorire aspetti fondamentali di Web Marketing, deve essere un’esperto in materia CSS.<\/p>\n

Oggi introduco la rubrica Propriet\u00e0 CSS3<\/a><\/strong> nel mio blog, nel quale ogni mese pubblicher\u00f2 una nuova funzione CSS3 per abbellire e alleggerire il vostro sito.<\/p>\n

La propriet\u00e0 CSS3 che analizzer\u00f2 oggi \u00e8: border-radius<\/strong>, permette di utilizzare facilmente gli angoli arrotondati negli elementi di design, senza bisogno di immagini, ed \u00e8 probabilmente una delle propriet\u00e0 pi\u00f9 famose dei CSS3.<\/p>\n

Vediamo subito come si presenta:<\/p>\n

Questo box presenta un’ombreggiatura su Firefox, Safari \/ Chrome, Opera e IE9.<\/div>\n

 <\/p>\n

Sintassi e definizione di border-radius<\/h4>\n

Come per molte propriet\u00e0 dei CSS relative ai margini, padding e bordi, ci sono quattro singole propriet\u00e0 per ogni angolo del box pi\u00f9 la propriet\u00e0 scorciatoia, che applica a tutti gli angoli il medesimo valore.<\/p>\n

Di seguito la definizione della sintassi dei CSS dei browser in questione:<\/p>\n\n\n\n\n\n\n\n\n
CSS3<\/th>\nMozilla<\/th>\nWebKit<\/th>\n<\/tr>\n
border-top-right-radius<\/td>\n-moz-border-radius-topright<\/td>\n-webkit-border-top-right-radius<\/td>\n<\/tr>\n
border-bottom-right-radius<\/td>\n-moz-border-radius-bottomright<\/td>\n-webkit-border-bottom-right-radius<\/td>\n<\/tr>\n
border-bottom-left-radius<\/td>\n-moz-border-radius-bottomleft<\/td>\n-webkit-border-bottom-left-radius<\/td>\n<\/tr>\n
border-top-left-radius<\/td>\n-moz-border-radius-topleft<\/td>\n-webkit-border-top-left-radius<\/td>\n<\/tr>\n
border-radius<\/td>\n-moz-border-radius<\/td>\n-webkit-border-radius<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Border-Radius con valore unico<\/h4>\n

La propriet\u00e0 border-radius viene generalmente utilizzata con un unico valore che assegna ad ogni angolo la stessa dimensione:<\/p>\n

\n-webkit-border-radius: 15px;
\n-moz-border-radius: 15px;
\nborder-radius: 15px;\n<\/div>\n

 <\/p>\n

Border-Radius con doppio valore<\/h4>\n

La propriet\u00e0 border-radius con doppio valore assegna valori differenti tra l’angolo orizzontale e quello verticale:<\/p>\n

\n-webkit-border-radius: 15px 50px;
\n-moz-border-radius: 15px 50px;\n<\/div>\n
\n-webkit-border-radius: 50px 15px;
\n-moz-border-radius: 50px 15px;\n<\/div>\n
\n-webkit-border-radius: 200px 30px;
\n-moz-border-radius: 200px 30px;\n<\/div>\n

 <\/p>\n

Border-Radius con angolazione personalizzata<\/h4>\n

La propriet\u00e0 border-radius permette anche di assegnare ad ogni angolo un’arrotondamento personalizzato:<\/p>\n

\n-webkit-border-top-left-radius: 30px;
\n-moz-border-radius-topleft: 30px;
\nborder-top-left-radius: 30px;\n<\/div>\n
\n-webkit-border-top-right-radius: 30px;
\n-moz-border-radius-topright: 30px;
\nborder-top-right-radius: 30px;\n<\/div>\n
\n-webkit-border-bottom-left-radius: 30px;
\n-moz-border-radius-bottomleft: 30px;
\nborder-bottom-left-radius: 30px;\n<\/div>\n
\n-webkit-border-bottom-right-radius: 30px;
\n-moz-border-radius-bottomright: 30px;
\nborder-bottom-right-radius: 30px;\n<\/div>\n
\n-webkit-border-top-left-radius: 30px;
\n-webkit-border-top-right-radius: 30px;
\n-moz-border-radius-topleft: 30px;
\n-moz-border-radius-topright: 30px;
\nborder-top-left-radius: 30px;
\nborder-top-right-radius: 30px;\n<\/div>\n
\n-webkit-border-top-right-radius: 30px;
\n-webkit-border-bottom-left-radius: 30px;
\n-moz-border-radius-topright: 30px;
\n-moz-border-radius-bottomleft: 30px;
\nborder-top-right-radius: 30px;
\nborder-bottom-left-radius: 30px;\n<\/div>\n

 <\/p>\n

Strumenti utili<\/h4>\n

A questo riguardo vi segnalo Border Radius<\/strong><\/a>, sito realizzato con l’unico scopo di semplificare la vita a chi vuole realizzare un box con la propriet\u00e0 radius: restituisce l’anteprima e il codice CSS da inserire.<\/p>\n

Prossimamente verr\u00e0 tratta un’altra interessante propriet\u00e0 dei CSS3<\/p>\n","protected":false},"excerpt":{"rendered":"

Il CSS3 \u00e8 l’evoluzione del CSS, un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. L’evoluzione di questo linguaggio st\u00e0 sconvolgendo positivamente la materia del Web Designer, che fin ora lavorava quasi esclusivamente con le immagini e che oggi, per favorire aspetti fondamentali di Web Marketing, deve essere un’esperto in materia […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[58],"class_list":["post-831","post","type-post","status-publish","format-standard","hentry","category-css","tag-css3"],"yoast_head":"\nCSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign<\/title>\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.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"Il CSS3 \u00e8 l’evoluzione del CSS, un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. L’evoluzione di questo linguaggio st\u00e0 sconvolgendo positivamente la materia del Web Designer, che fin ora lavorava quasi esclusivamente con le immagini e che oggi, per favorire aspetti fondamentali di Web Marketing, deve essere un’esperto in materia […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-18T09:19:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-01-10T16:29:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/\",\"name\":\"CSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg\",\"datePublished\":\"2010-12-18T09:19:44+00:00\",\"dateModified\":\"2011-01-10T16:29:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg\",\"width\":\"500\",\"height\":\"400\",\"caption\":\"CSS3 Border Radius arrotonda gli angoli\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Border Radius: arrotonda gli angoli\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign","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.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/","og_locale":"it_IT","og_type":"article","og_title":"CSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign","og_description":"Il CSS3 \u00e8 l’evoluzione del CSS, un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. L’evoluzione di questo linguaggio st\u00e0 sconvolgendo positivamente la materia del Web Designer, che fin ora lavorava quasi esclusivamente con le immagini e che oggi, per favorire aspetti fondamentali di Web Marketing, deve essere un’esperto in materia […]","og_url":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2010-12-18T09:19:44+00:00","article_modified_time":"2011-01-10T16:29:45+00:00","og_image":[{"width":500,"height":400,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/","url":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/","name":"CSS3 Border Radius: arrotonda gli angoli | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg","datePublished":"2010-12-18T09:19:44+00:00","dateModified":"2011-01-10T16:29:45+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/CSS3-Border-Radius-arrotonda-gli-angoli.jpg","width":"500","height":"400","caption":"CSS3 Border Radius arrotonda gli angoli"},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/css3-border-radius-arrotonda-gli-angoli\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Border Radius: arrotonda gli angoli"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=831"}],"version-history":[{"count":55,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/831\/revisions"}],"predecessor-version":[{"id":954,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/831\/revisions\/954"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}