{"id":6177,"date":"2013-11-29T21:04:59","date_gmt":"2013-11-29T21:04:59","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6177"},"modified":"2019-03-02T09:14:11","modified_gmt":"2019-03-02T09:14:11","slug":"css3-border-image","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/","title":{"rendered":"CSS3 Border Image"},"content":{"rendered":"<p>El atributo <em><strong>border-image<\/strong><\/em> es un atributo que nos ayuda a aplicar nuevos estilos a los contenedores con CSS, a trav\u00e9s de la utilizaci\u00f3n de im\u00e1genes en los bordes de los elementos, incluso pudiendo escoger varias im\u00e1genes para varias de las partes de los bordes.<\/p>\n<p>Colocar im\u00e1genes en los bordes es una tarea que ya se suele realizar en el dise\u00f1o web, y para ello se suelen utilizar complementariamente t\u00e9cnicas con los lenguajes HTML y CSS. Es decir, para que un elemento de la p\u00e1gina, como puede ser un contenedor o una tabla, p\u00e1rrafo, etc., tenga un borde a partir de una imagen, se necesita colocar alg\u00fan c\u00f3digo HTML adicional, con alg\u00fan contenedor que nos permita luego definir estilos CSS para \u00abimitar\u00bb ese borde de imagen. En cualquier caso, estemos o no familiarizados con las t\u00e9cnicas de uso de im\u00e1genes en los bordes, lo importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos atributos a los elementos que deseemos.<\/p>\n<p>Como por ejemplo:<\/p>\n<pre>div {\r\n\u00a0\u00a0 \u00a0border-style: solid; border-width: 180px 222px 198px 211px; \r\n\u00a0\u00a0 \u00a0-moz-border-image: url(border5.jpg) 180 222 198 211 repeat; \r\n\u00a0\u00a0 \u00a0-webkit-border-image: url(border5.jpg) 180 222 198 211 repeat; \r\n\u00a0\u00a0 \u00a0-o-border-image: url(border5.jpg) 180 222 198 211 repeat; \r\n\u00a0\u00a0 \u00a0border-image: url(border5.jpg) 180 222 198 211 fill repeat;\r\n}<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/border-image\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p><a href=\"http:\/\/border-image.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Border Image Generator<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El atributo border-image es un atributo que nos ayuda a aplicar nuevos estilos a los contenedores con CSS, a trav\u00e9s de la utilizaci\u00f3n de im\u00e1genes en los bordes de los elementos, incluso pudiendo escoger varias im\u00e1genes para varias de las partes de los bordes. Colocar im\u00e1genes en los bordes es una tarea que ya se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[74],"class_list":["post-6177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-contenedores"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Border Image - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Border Image - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"El atributo border-image es un atributo que nos ayuda a aplicar nuevos estilos a los contenedores con CSS, a trav\u00e9s de la utilizaci\u00f3n de im\u00e1genes en los bordes de los elementos, incluso pudiendo escoger varias im\u00e1genes para varias de las partes de los bordes. Colocar im\u00e1genes en los bordes es una tarea que ya se [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-29T21:04:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:14:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"365\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/\",\"name\":\"CSS3 Border Image - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"datePublished\":\"2013-11-29T21:04:59+00:00\",\"dateModified\":\"2019-03-02T09:14:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"width\":365,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Border Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Border Image - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS3 Border Image - Jose Aguilar Blog","og_description":"El atributo border-image es un atributo que nos ayuda a aplicar nuevos estilos a los contenedores con CSS, a trav\u00e9s de la utilizaci\u00f3n de im\u00e1genes en los bordes de los elementos, incluso pudiendo escoger varias im\u00e1genes para varias de las partes de los bordes. Colocar im\u00e1genes en los bordes es una tarea que ya se [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-11-29T21:04:59+00:00","article_modified_time":"2019-03-02T09:14:11+00:00","og_image":[{"width":365,"height":512,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/","url":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/","name":"CSS3 Border Image - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","datePublished":"2013-11-29T21:04:59+00:00","dateModified":"2019-03-02T09:14:11+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","width":365,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-border-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Border Image"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6177"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5609"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}