{"id":11194,"date":"2022-09-13T13:00:00","date_gmt":"2022-09-13T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=11194"},"modified":"2023-08-29T09:25:55","modified_gmt":"2023-08-29T07:25:55","slug":"redondear-border-css","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/","title":{"rendered":"Redondear bordes CSS &#8211; Gu\u00eda para iniciados"},"content":{"rendered":"\n<p>En la entrada de hoy vamos a aprender <strong>c\u00f3mo redondear bordes con CSS<\/strong>. Esta entrada es para usuarios que se est\u00e1n iniciando en el mundo de la programaci\u00f3n, por lo que si ya est\u00e1s familiarizado con la programaci\u00f3n web, quiz\u00e1s no encuentres informaci\u00f3n nueva para aprovecharla. O quiz\u00e1s si \ud83d\ude09 <\/p>\n\n\n\n<p>\u00a1Comenzamos!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Antes de nada, si est\u00e1s aqu\u00ed entiendo que ya tienes ciertos conocimientos de HTML y de CSS, ya que estos <strong>te ser\u00e1n de utilidad<\/strong>. Si no es as\u00ed, te aconsejo echar un vistazo a nuestros <a href=\"https:\/\/carontestudio.com\/formacion\/cursos-web-vitoria\/\">cursos de dise\u00f1o web<\/a>, o tambi\u00e9n a las <a href=\"https:\/\/carontestudio.com\/blog\/category\/programacion-web\/\">publicaciones sobre programaci\u00f3n HTML<\/a> que hacemos en nuestro blog.<\/p>\n\n\n\n<p>Dicho esto, vamos a comenzar remarcando que una de las caracter\u00edsticas m\u00e1s interesantes de CSS, es la posibilidad de redondear los bordes de un objeto. Esto nos va a permitir desde crear atractivos botones CTA (<strong>call-to-action<\/strong> o llamada a la acci\u00f3n), hasta personalizar cualquier otra secci\u00f3n u objeto de nuestra web, otorg\u00e1ndole una personalidad propia. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo hacer bordes redondeados en CSS?<\/h2>\n\n\n\n<p>Para redondear bordes con en una p\u00e1gina web, <strong>debes utilizar la propiedad border-radius de CSS<\/strong>. Esta propiedad define un radio para cada una de las esquinas de un elemento HTML, y te permite con ello redondearlas.<\/p>\n\n\n\n<p>Usando el elemento HTML &lt;div&gt;, vamos a ver c\u00f3mo ser\u00eda la sentencia CSS para redondear sus esquinas:<\/p>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"mdLVpzB\" data-user=\"carontestudio\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/mdLVpzB\">\n  Untitled<\/a> by Alberto (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Con esto, las 4 esquinas del elemento &lt;div&gt; ser\u00e1n redondeadas por igual. <\/p>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Redondear esquinas con CSS por separado<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Para dar un estilo diferente e independiente a alguna de las 4 esquinas, tan s\u00f3lo tendr\u00e1s que a\u00f1adir m\u00e1s valores a la propiedad border-radius. Podr\u00e1s a\u00f1adir hasta 4 valores, uno por cada esquina. Se organizan de la siguiente forma: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si solo hay un valor para border-radius. se usar\u00e1 este para redondear las 4 esquinas por igual<\/li>\n\n\n\n<li>Si hay dos valores, el primer valor redondear\u00e1 las esquinas 1 y 3, y el segundo valor redondear\u00e1 las esquinas 2 y 4. <\/li>\n\n\n\n<li>Si introduces tres valores en la propiedad, el primero actuar\u00e1 sobre la esquina 1, el segundo valor sobre las esquinas 2 y 4, y el tercer valor sobre la esquina 3. <\/li>\n\n\n\n<li>Si introduces cuatro valores, el primero actuar\u00e1 sobre la esquina 1, el segundo sobre la esquina 2, el tercero sobre la esquina 3, y por \u00faltimo, el cuarto valor actuar\u00e1 sobre la esquina 4. <\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/border-radius-order.jpg\" alt=\"Orden de las esquinas para usar con la propiedad border-radius de CSS\" class=\"wp-image-11199\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/border-radius-order.jpg 600w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/border-radius-order-300x200.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">Orden de las esquinas para usar con la propiedad border-radius de CSS<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"ZEoQrrO\" data-user=\"carontestudio\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/ZEoQrrO\">\n  Untitled<\/a> by Alberto (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo realizar bordes con elipses, o bordes irregulares<\/h2>\n\n\n\n<p>Otro giro de tuerca con <strong>border-radius<\/strong> es que podr\u00e1s realizar <strong>bordes irregulares<\/strong>, o <strong>bordes con elipses<\/strong> a tus elementos HTML. En esta ocasi\u00f3n, por cada una de las cuatro esquinas, <strong>tendr\u00e1s que a\u00f1adir dos valores<\/strong>. Uno para el eje X, y otro para el eje Y. <\/p>\n\n\n\n<p>Por lo tanto, si quieres modificar las 4 esquinas por igual de un elemento, tendr\u00e1s que a\u00f1adir dos valores. Si en otra ocasi\u00f3n, por ejemplo, quieres hacer esquinas irregulares en las esquinas 1 y 3, tendr\u00e1s que a\u00f1adir 4 valores, que ser\u00edan 2 para las esquinas 1 y 3, y otros 2 valores para las esquinas 2 y 4. Te muestro un ejemplo<\/p>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"JjvGLBx\" data-user=\"carontestudio\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/JjvGLBx\">\n  Untitled<\/a> by Alberto (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>C\u00f3mo has podido comprobar, con la <strong>propiedad border-radius de CSS<\/strong> es muy f\u00e1cil redondear los bordes de los elementos de tu web. Espero que con los ejemplos que te he dejado en la entrada, puedas lograr personalizar tu web tanto como necesites. Si quieres puedes ojear m\u00e1s <a href=\"https:\/\/carontestudio.com\/blog\/category\/diseno-web\/\">entradas sobre gu\u00edas, trucos e informaci\u00f3n general de CSS<\/a>.<\/p>\n\n\n\n<p>\u00a1Nos vemos en la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/selectores-css-avanzados\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/08\/poster-css-selectores-avanzados-1024x604.jpg\" alt=\"Selectores avanzados CSS3\" class=\"wp-image-5874\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/08\/poster-css-selectores-avanzados-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/08\/poster-css-selectores-avanzados-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/08\/poster-css-selectores-avanzados-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/08\/poster-css-selectores-avanzados.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/not-selector-avanzado-css\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/11\/selector-avanzado-css-not-1024x604.jpg\" alt=\"Selector avanzado CSS\" class=\"wp-image-12122\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/11\/selector-avanzado-css-not-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/11\/selector-avanzado-css-not-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/11\/selector-avanzado-css-not-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/11\/selector-avanzado-css-not.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En la entrada de hoy vamos a aprender c\u00f3mo redondear bordes con CSS. Esta entrada es para usuarios que se est\u00e1n iniciando en el mundo de la programaci\u00f3n, por lo que si ya est\u00e1s familiarizado con la programaci\u00f3n web, quiz\u00e1s no encuentres informaci\u00f3n nueva para aprovecharla. O quiz\u00e1s si \ud83d\ude09 \u00a1Comenzamos!<\/p>\n","protected":false},"author":4,"featured_media":11207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-11194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/redondear-border-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/redondear-border-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-13T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-29T07:25:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"V\u00edctor S\u00e1nchez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"V\u00edctor S\u00e1nchez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/\"},\"author\":{\"name\":\"V\u00edctor S\u00e1nchez\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\"},\"headline\":\"Redondear bordes CSS &#8211; Gu\u00eda para iniciados\",\"datePublished\":\"2022-09-13T11:00:00+00:00\",\"dateModified\":\"2023-08-29T07:25:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/\"},\"wordCount\":629,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/redondear-border-css.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/\",\"name\":\"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/redondear-border-css.jpg\",\"datePublished\":\"2022-09-13T11:00:00+00:00\",\"dateModified\":\"2023-08-29T07:25:55+00:00\",\"description\":\"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/redondear-border-css.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/redondear-border-css.jpg\",\"width\":1250,\"height\":737,\"caption\":\"C\u00f3mo redondear un borde con CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/redondear-border-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Redondear bordes CSS &#8211; Gu\u00eda para iniciados\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\",\"name\":\"V\u00edctor S\u00e1nchez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"caption\":\"V\u00edctor S\u00e1nchez\"},\"description\":\"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.\",\"sameAs\":[\"https:\\\/\\\/www.carontestudio.com\\\/\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/victor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio","description":"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.","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:\/\/carontestudio.com\/blog\/redondear-border-css\/","og_locale":"es_ES","og_type":"article","og_title":"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio","og_description":"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.","og_url":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2022-09-13T11:00:00+00:00","article_modified_time":"2023-08-29T07:25:55+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","type":"image\/jpeg"}],"author":"V\u00edctor S\u00e1nchez","twitter_card":"summary_large_image","twitter_title":"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio","twitter_description":"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.","twitter_image":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","twitter_misc":{"Escrito por":"V\u00edctor S\u00e1nchez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/"},"author":{"name":"V\u00edctor S\u00e1nchez","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9"},"headline":"Redondear bordes CSS &#8211; Gu\u00eda para iniciados","datePublished":"2022-09-13T11:00:00+00:00","dateModified":"2023-08-29T07:25:55+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/"},"wordCount":629,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/redondear-border-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/","url":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/","name":"Redondear bordes CSS - Gu\u00eda para iniciados - Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","datePublished":"2022-09-13T11:00:00+00:00","dateModified":"2023-08-29T07:25:55+00:00","description":"\u00bfBuscas c\u00f3mo redondear bordes con CSS? AQU\u00cd te muestro TODA LA INFORMACI\u00d3N sobre border-radius con varios ejemplos que podr\u00e1s usar en tu web.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/redondear-border-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/redondear-border-css.jpg","width":1250,"height":737,"caption":"C\u00f3mo redondear un borde con CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/redondear-border-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Redondear bordes CSS &#8211; Gu\u00eda para iniciados"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9","name":"V\u00edctor S\u00e1nchez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","caption":"V\u00edctor S\u00e1nchez"},"description":"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.","sameAs":["https:\/\/www.carontestudio.com\/"],"url":"https:\/\/carontestudio.com\/blog\/author\/victor\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=11194"}],"version-history":[{"count":16,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11194\/revisions"}],"predecessor-version":[{"id":16190,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11194\/revisions\/16190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/11207"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=11194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=11194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=11194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}