{"id":452,"date":"2017-10-31T16:35:53","date_gmt":"2017-10-31T15:35:53","guid":{"rendered":"http:\/\/vermiip.es\/blog\/?p=452"},"modified":"2017-10-31T16:37:47","modified_gmt":"2017-10-31T15:37:47","slug":"redondear-los-bordes-con-css","status":"publish","type":"post","link":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/","title":{"rendered":"Redondear los bordes con CSS"},"content":{"rendered":"

Actualmente todos los navegadores reconocen el comando CSS \u00abborder-radius\u00bb que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen.<\/p>\n

Su uso es sencillo:<\/p>\n

[HTML]
\n<style><\/p>\n

.caja{border:1px solid #000;width:200px;height:200px;}
\n.redondea { border-radius: 5px;}<\/p>\n

<\/style><\/p>\n

<div class=\u00bbcaja redondea\u00bb>Cualquier contenido<\/div><\/p>\n

[\/HTML]<\/p>\n

En el ejemplo hemos creado un div de 200x200px con un borde negro de 1px. Gracias a la clase \u00abredondea\u00bb, el borde se redondea en las 4 esquinas en 5px de radio.<\/p>\n

Podemos redondear cada una de las 4 esquinas de manera independiente:<\/p>\n

[HTML]<\/p>\n

.redondea {border-radius: 5px 2px 7px 9px;}<\/p>\n

[\/HTML]<\/p>\n

El primer valor se corresponde con la esquina superior izquierda y va avanzando en el sentido de las agujas del reloj:<\/p>\n

    \n
  1. Esquina superior izquierda<\/li>\n
  2. Esquina superior derecha<\/li>\n
  3. Esquina inferior derecha<\/li>\n
  4. Esquina inferior izquierda<\/li>\n<\/ol>\n

    Redondeando hasta formar un c\u00edrculo<\/h4>\n

    Si queremos redondear las esquinas hasta hacer un c\u00edrculo podemos hacerlo as\u00ed:<\/p>\n

    [HTML]<\/p>\n

    .redondea {border-radius: 50%;}<\/p>\n

    [\/HTML]<\/p>\n

    Esto es muy utilizado en fotos de perfil de las redes sociales, por ejemplo. El \u00fanico requisito para que nos quede un c\u00edrculo perfecto es que la imagen o contenedor (div, p, etc.) sea cuadrado, o sea, tenga el mismo ancho que alto.<\/p>\n

    Buscando mayor compatibilidad<\/h4>\n

    Aunque como dec\u00eda al principio en la actualidad todos los navegadores reconocen la instrucci\u00f3n border-radius de CSS, podemos buscar una mayor compatibilidad a\u00f1adiendo lo siguiente:<\/p>\n

    [HTML]<\/p>\n

    .redondea {
    \n-webkit-border-radius: 5px;
    \n-moz-border-radius: 5px;
    \nborder-radius: 5px;
    \n}<\/p>\n

    [\/HTML]<\/p>\n

    Donde las dos primeras l\u00edneas a\u00f1aden compatibilidad a los navegadores antiguos de mozilla (firefox) y webkit (chrome, safari)<\/p>\n","protected":false},"excerpt":{"rendered":"

    Actualmente todos los navegadores reconocen el comando CSS \u00abborder-radius\u00bb que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen. Su uso es sencillo: [HTML] <style> .caja{border:1px solid #000;width:200px;height:200px;} .redondea { border-radius: 5px;} <\/style> <div class=\u00bbcaja redondea\u00bb>Cualquier contenido<\/div> [\/HTML] En el ejemplo hemos creado un div de 200x200px […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89],"tags":[],"class_list":["post-452","post","type-post","status-publish","format-standard","hentry","category-css"],"_wp_attached_file":null,"_wp_attachment_metadata":null,"_wp_old_slug":null,"_aioseop_description":"El comando CSS \"border-radius\" que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen en HTML","_wp_attachment_image_alt":null,"yoast_head":"\nRedondear los bordes con CSS - Ver mi IP<\/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:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Redondear los bordes con CSS - Ver mi IP\" \/>\n<meta property=\"og:description\" content=\"Actualmente todos los navegadores reconocen el comando CSS \u00abborder-radius\u00bb que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen. Su uso es sencillo: [HTML] <style> .caja{border:1px solid #000;width:200px;height:200px;} .redondea { border-radius: 5px;} <\/style> <div class=\u00bbcaja redondea\u00bb>Cualquier contenido<\/div> [\/HTML] En el ejemplo hemos creado un div de 200x200px […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ver mi IP\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-31T15:35:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-31T15:37:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vermiip.es\/blog\/wp-content\/uploads\/2023\/10\/cropped-logo-vermiip-naranja.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Xose\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Xose\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/\"},\"author\":{\"name\":\"Xose\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#\\\/schema\\\/person\\\/a51689537a81b5c5c66031151b0f73a1\"},\"headline\":\"Redondear los bordes con CSS\",\"datePublished\":\"2017-10-31T15:35:53+00:00\",\"dateModified\":\"2017-10-31T15:37:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/\"},\"wordCount\":276,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#organization\"},\"articleSection\":[\"css\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/\",\"url\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/\",\"name\":\"Redondear los bordes con CSS - Ver mi IP\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#website\"},\"datePublished\":\"2017-10-31T15:35:53+00:00\",\"dateModified\":\"2017-10-31T15:37:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/redondear-los-bordes-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Redondear los bordes con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/\",\"name\":\"Cual es mi ip - Internet y otras locuras\",\"description\":\"Internet y otras locuras\",\"publisher\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#organization\"},\"alternateName\":\"Cual es mi IP\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#organization\",\"name\":\"Ver mi IP\",\"alternateName\":\"vermiip\",\"url\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-logo-vermiip-naranja.png\",\"contentUrl\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-logo-vermiip-naranja.png\",\"width\":512,\"height\":512,\"caption\":\"Ver mi IP\"},\"image\":{\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/vermiip.es\\\/blog\\\/#\\\/schema\\\/person\\\/a51689537a81b5c5c66031151b0f73a1\",\"name\":\"Xose\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g\",\"caption\":\"Xose\"},\"sameAs\":[\"http:\\\/\\\/www.enfocado.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Redondear los bordes con CSS - Ver mi IP","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:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"Redondear los bordes con CSS - Ver mi IP","og_description":"Actualmente todos los navegadores reconocen el comando CSS \u00abborder-radius\u00bb que nos permite redondear las esquinas de los bordes de casi cualquier etiqueta (div, p, etc.) o imagen. Su uso es sencillo: [HTML] <style> .caja{border:1px solid #000;width:200px;height:200px;} .redondea { border-radius: 5px;} <\/style> <div class=\u00bbcaja redondea\u00bb>Cualquier contenido<\/div> [\/HTML] En el ejemplo hemos creado un div de 200x200px […]","og_url":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/","og_site_name":"Ver mi IP","article_published_time":"2017-10-31T15:35:53+00:00","article_modified_time":"2017-10-31T15:37:47+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/vermiip.es\/blog\/wp-content\/uploads\/2023\/10\/cropped-logo-vermiip-naranja.png","type":"image\/png"}],"author":"Xose","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Xose","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/#article","isPartOf":{"@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/"},"author":{"name":"Xose","@id":"https:\/\/vermiip.es\/blog\/#\/schema\/person\/a51689537a81b5c5c66031151b0f73a1"},"headline":"Redondear los bordes con CSS","datePublished":"2017-10-31T15:35:53+00:00","dateModified":"2017-10-31T15:37:47+00:00","mainEntityOfPage":{"@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/"},"wordCount":276,"commentCount":1,"publisher":{"@id":"https:\/\/vermiip.es\/blog\/#organization"},"articleSection":["css"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/","url":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/","name":"Redondear los bordes con CSS - Ver mi IP","isPartOf":{"@id":"https:\/\/vermiip.es\/blog\/#website"},"datePublished":"2017-10-31T15:35:53+00:00","dateModified":"2017-10-31T15:37:47+00:00","breadcrumb":{"@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vermiip.es\/blog\/redondear-los-bordes-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/vermiip.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Redondear los bordes con CSS"}]},{"@type":"WebSite","@id":"https:\/\/vermiip.es\/blog\/#website","url":"https:\/\/vermiip.es\/blog\/","name":"Cual es mi ip - Internet y otras locuras","description":"Internet y otras locuras","publisher":{"@id":"https:\/\/vermiip.es\/blog\/#organization"},"alternateName":"Cual es mi IP","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vermiip.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/vermiip.es\/blog\/#organization","name":"Ver mi IP","alternateName":"vermiip","url":"https:\/\/vermiip.es\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/vermiip.es\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/vermiip.es\/blog\/wp-content\/uploads\/2023\/10\/cropped-logo-vermiip-naranja.png","contentUrl":"https:\/\/vermiip.es\/blog\/wp-content\/uploads\/2023\/10\/cropped-logo-vermiip-naranja.png","width":512,"height":512,"caption":"Ver mi IP"},"image":{"@id":"https:\/\/vermiip.es\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vermiip.es\/blog\/#\/schema\/person\/a51689537a81b5c5c66031151b0f73a1","name":"Xose","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d9f11f6facf8d2f6109858fbb8fd2e7da1e2c41983bc8d9269bba5fb12b3718?s=96&d=mm&r=g","caption":"Xose"},"sameAs":["http:\/\/www.enfocado.com"]}]}},"_links":{"self":[{"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/posts\/452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/comments?post=452"}],"version-history":[{"count":7,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/posts\/452\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/posts\/452\/revisions\/459"}],"wp:attachment":[{"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/media?parent=452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/categories?post=452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vermiip.es\/blog\/wp-json\/wp\/v2\/tags?post=452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}