{"id":12614,"date":"2024-12-23T18:06:06","date_gmt":"2024-12-23T18:06:06","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=blogs&#038;p=12614"},"modified":"2025-03-14T19:32:00","modified_gmt":"2025-03-14T19:32:00","slug":"como-agregar-bordes-de-texto-en-wordpress-2-metodos","status":"publish","type":"blogs","link":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/","title":{"rendered":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos)"},"content":{"rendered":"\n<p>Si est\u00e1s comenzando a explorar las numerosas opciones de estilo de WordPress, tal vez te est\u00e1s preguntando c\u00f3mo agregar bordes de texto a tu sitio de WordPress.<\/p>\n\n\n\n<p>Dependiendo de lo que quer\u00e9s lograr, a\u00f1adir bordes puede mejorar la presentaci\u00f3n de tu contenido y hacer que algunos elementos importantes se destaquen, as\u00ed que tiene sentido que quieras utilizarlos.<\/p>\n\n\n\n<p>Por suerte, agregar bordes de texto en WordPress es muy f\u00e1cil. Si quer\u00e9s que tu texto tenga bordes como los de este p\u00e1rrafo, segu\u00ed leyendo para aprender c\u00f3mo agregarlos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Puntos clave<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Puedes agregar bordes a tu sitio de WordPress utilizando las configuraciones de borde incorporadas en el editor Gutenberg.<\/li>\n\n\n\n<li>Alternativamente, pod\u00e9s usar CSS personalizado para a\u00f1adir bordes a tu texto. Pod\u00e9s hacerlo a trav\u00e9s de la hoja de estilo de tu tema (temas de bloques) o la funci\u00f3n del Personalizador de Temas (temas cl\u00e1sicos).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2 M\u00e9todos para Agregar Bordes de Texto en WordPress<\/h2>\n\n\n\n<p>Existen varios m\u00e9todos para agregar bordes de texto en WordPress. El m\u00e1s directo es usar las opciones de estilo de bloque integradas en Gutenberg, pero tambi\u00e9n pod\u00e9s usar CSS si lo prefer\u00eds.<\/p>\n\n\n\n<p>Exploremos ambas opciones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 1: Agregar Bordes de Texto con las Configuraciones del Bloque de P\u00e1rrafo<\/h3>\n\n\n\n<p>La forma m\u00e1s f\u00e1cil de agregar bordes a tus textos en WordPress es utilizando las configuraciones de estilo integradas en WordPress.<\/p>\n\n\n\n<p>Hac\u00e9 clic en cualquier p\u00e1rrafo o encabezado al que quer\u00e9s a\u00f1adir un borde. Deslizate hacia abajo por la barra lateral de configuraciones del bloque hasta que veas la secci\u00f3n de <strong>Borde<\/strong>. Hac\u00e9 clic en el bot\u00f3n <strong>+ (Opciones de Borde)<\/strong> y luego en <strong>Borde<\/strong> en el peque\u00f1o men\u00fa que aparece justo despu\u00e9s.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-1-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un bloque\" class=\"wp-image-11734\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-1-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-1-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-1-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ahora pod\u00e9s usar un deslizador para determinar el tama\u00f1o del borde o ingresar directamente el n\u00famero de p\u00edxeles que quer\u00e9s que tenga el borde. Hac\u00e9 clic en <strong>Guardar<\/strong> arriba para guardar tus cambios.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-2-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un bloque\" class=\"wp-image-11736\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-2-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-2-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-2-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-2.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Por ejemplo, as\u00ed es como se ver\u00e1 tu bloque de p\u00e1rrafo con un borde de <code>50px<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-3-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un bloque\" class=\"wp-image-11738\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-3-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-3-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-3-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-3.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Dar a Cada Lado su Propio Borde Independiente (Opcional)<\/h4>\n\n\n\n<p>Tambi\u00e9n pod\u00e9s hacer que cada uno de los bordes de tu bloque sea independiente al hacer clic en el bot\u00f3n <strong>Desvincular lados<\/strong>, representado con un \u00edcono de hiperv\u00ednculo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-4-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un bloque para hacer que cada borde sea independiente\" class=\"wp-image-11740\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-4-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-4-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-4-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-4.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Despu\u00e9s de desvincular los lados, pod\u00e9s dar a cada lado su propio borde independiente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-5-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un bloque para hacer que cada borde sea independiente\" class=\"wp-image-11742\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-5-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-5-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-5-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-5.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Usar el Mismo Borde para M\u00faltiples Bloques de Texto (Opcional)<\/h4>\n\n\n\n<p>Finalmente, tambi\u00e9n pod\u00e9s agrupar varios p\u00e1rrafos y usar el mismo borde para todos ellos.<\/p>\n\n\n\n<p>Para hacerlo, seleccion\u00e1 todos los p\u00e1rrafos que quer\u00e9s agrupar (deben estar contiguos entre s\u00ed), hac\u00e9 clic en el \u00edcono de <strong>P\u00e1rrafo<\/strong>, y luego en <strong>Agrupar<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-6-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 agrupando 2 bloques de p\u00e1rrafo\" class=\"wp-image-11750\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-6-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-6-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-6-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-6.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Despu\u00e9s de agrupar 2 o m\u00e1s p\u00e1rrafos, hac\u00e9 clic en <strong>Estilos<\/strong> en la barra lateral de configuraciones del bloque a la derecha.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-7-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando la configuraci\u00f3n de estilos de un grupo de bloques\" class=\"wp-image-11744\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-7-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-7-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-7-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-7.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Deslizate hacia abajo hasta que veas la secci\u00f3n <strong>Borde &amp; Radio<\/strong>. Us\u00e1 el deslizador para determinar el tama\u00f1o del borde o ingres\u00e1 un n\u00famero espec\u00edfico de p\u00edxeles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-8-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 editando las configuraciones de borde de un grupo de bloques\" class=\"wp-image-11746\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-8-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-8-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-8-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-8.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 2: Agregar Bordes de Texto con CSS Personalizado<\/h3>\n\n\n\n<p>Aunque el primer m\u00e9todo deber\u00eda ser m\u00e1s que suficiente y no deber\u00eda haber necesidad de otro, siempre pod\u00e9s contar con CSS para ayudarte con cualquier necesidad de estilo en tu sitio.<\/p>\n\n\n\n<p>Por eso, lo incluimos para completar y porque puede ayudarte a aprender m\u00e1s sobre c\u00f3mo controlar los estilos de tu sitio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Paso 1: Asignar una Clase HTML \u00danica a tu Texto<\/h4>\n\n\n\n<p>Las clases son atributos HTML utilizados por CSS y JavaScript para acceder y modificar elementos HTML de esa clase.<\/p>\n\n\n\n<p>Para asignar una clase HTML \u00fanica a un bloque de WordPress, and\u00e1 a la p\u00e1gina o publicaci\u00f3n en tu sitio donde quer\u00e9s agregar un borde a tu texto. Hac\u00e9 clic en el bloque que quer\u00e9s estilizar y busc\u00e1 la secci\u00f3n <strong>Avanzada<\/strong> en la barra lateral de configuraciones del bloque.<\/p>\n\n\n\n<p>Us\u00e1 <strong>Clase(s) CSS Adicional(es)<\/strong> para agregar una clase que sea \u00fanica en todo tu sitio, como <code>parrafo-especial<\/code>. Preferiblemente, us\u00e1 guiones para separar palabras. Hac\u00e9 clic en <strong>Guardar<\/strong> arriba para guardar los cambios.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-9-1024x451.jpg\" alt=\"El editor Gutenberg de WordPress. El usuario est\u00e1 navegando la barra lateral de configuraciones del bloque para asignar una clase HTML personalizada a un bloque\" class=\"wp-image-11748\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-9-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-9-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-9-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-9.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Con la clase en su lugar, el proceso para aplicar CSS personalizado depende de tu tema. M\u00e1s espec\u00edficamente, depende de si pod\u00e9s acceder a la funci\u00f3n <strong>Apariencia &gt; Personalizar<\/strong> en tu administraci\u00f3n de WordPress.<\/p>\n\n\n\n<p>Los temas cl\u00e1sicos permiten usar esta funci\u00f3n (el Personalizador de Temas), mientras que los temas de bloques no.<\/p>\n\n\n\n<p>Veamos c\u00f3mo usar esta funci\u00f3n para agregar CSS personalizado en temas cl\u00e1sicos y las alternativas si ten\u00e9s un tema de bloques.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Paso 2 (Temas Cl\u00e1sicos): Agregar CSS Personalizado con el Personalizador de Temas<\/h4>\n\n\n\n<p>And\u00e1 a <strong>Apariencia &gt; Personalizar &gt; CSS Adicional<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-10-1024x451.jpg\" alt=\"La funci\u00f3n de Personalizar en WordPress que permite a los usuarios editar sus temas\" class=\"wp-image-11752\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-10-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-10-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-10-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-10.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En la pantalla de <strong>CSS Adicional<\/strong>, agreg\u00e1 el siguiente fragmento de CSS. Record\u00e1 insertar la clase que asignaste a tu bloque y modificar el estilo espec\u00edfico a lo que necesites:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">.parrafo-especial {\n  border: 5px solid #000;\n}<\/code><\/pre>\n\n\n\n<p>Este estilo CSS a\u00f1adir\u00e1 un borde s\u00f3lido negro de 5 p\u00edxeles de ancho al p\u00e1rrafo al que asignaste la clase <code>parrafo-especial<\/code>.<\/p>\n\n\n\n<p>Cuando agregas estilos a trav\u00e9s del Personalizador de Temas, no pod\u00e9s previsualizarlos en el editor de Gutenberg, as\u00ed que and\u00e1 a tu publicaci\u00f3n y revis\u00e1 los resultados.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-11-1024x451.jpg\" alt=\"Una publicaci\u00f3n de WordPress. Uno de los p\u00e1rrafos tiene un borde negro alrededor, a\u00f1adido con las configuraciones de estilo del editor de publicaciones\" class=\"wp-image-11754\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-11-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-11-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-11-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-11.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u00a1Como pod\u00e9s ver, el estilo de borde se aplic\u00f3 correctamente!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Paso 2 (Temas de Bloques): Agregar CSS Personalizado Editando Hojas de Estilo<\/h4>\n\n\n\n<p>Con el nombre de clase en su lugar, ten\u00e9s 3 opciones para agregar CSS personalizado:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Naveg\u00e1 a trav\u00e9s de tus archivos de WordPress usando un panel de control de hosting como cPanel, un cliente FTP como FileZilla, o un entorno local. La ubicaci\u00f3n del archivo que ten\u00e9s que editar es <strong>wp-content\/themes\/tu-tema-activo\/style.css<\/strong>. Tambi\u00e9n podr\u00eda ser <strong>styles.css<\/strong>.<\/li>\n\n\n\n<li>Us\u00e1 un plugin de fragmentos de c\u00f3digo como <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPCode<\/a> y <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noreferrer noopener\">Code Snippets<\/a> para a\u00f1adir CSS personalizado sin navegar por los archivos principales. Este m\u00e9todo tiene el beneficio de mantener los estilos personalizados si alguna vez actualiz\u00e1s tu tema.<\/li>\n\n\n\n<li>Cre\u00e1 un tema hijo y agreg\u00e1 CSS personalizado a \u00e9l. Este m\u00e9todo tambi\u00e9n retiene CSS personalizado despu\u00e9s de actualizar tu tema.<\/li>\n<\/ul>\n\n\n\n<p>Independientemente del m\u00e9todo, necesit\u00e1s agregar el siguiente fragmento de CSS personalizado. Reemplaz\u00e1 la clase con la que asignaste a tu bloque y modific\u00e1 el grosor del borde y otros par\u00e1metros a lo que necesites:<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">.parrafo-especial {\n  border: 5px solid #000;\n}<\/code><\/pre>\n<!-- \/wp:post-content -->\n\n<!-- wp:paragraph -->\n<p>Guard\u00e1 el archivo <strong>style.css<\/strong> o <strong>styles.css<\/strong>, y los cambios deber\u00edan reflejarse en tu sitio inmediatamente. Volv\u00e9 a revisar en la publicaci\u00f3n donde agregaste la clase HTML personalizada para ver los resultados.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":11756,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-12-1024x451.jpg\" alt=\"Una publicaci\u00f3n de WordPress. Uno de los p\u00e1rrafos tiene un borde negro alrededor, a\u00f1adido con CSS personalizado\" class=\"wp-image-11756\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-12-1024x451.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-12-300x132.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-12-768x338.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-12.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Agreg\u00e1 Bordes de Texto para Controlar el Estilo de tu Sitio de WordPress<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Agregar bordes de texto a tu sitio no es nada complicado. El editor Gutenberg de WordPress tiene opciones de estilo integradas que te permiten a\u00f1adir bordes en menos de un minuto. Sin embargo, tambi\u00e9n pod\u00e9s usar CSS si lo prefer\u00eds.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este art\u00edculo, proporcionamos los pasos para realizar ambos m\u00e9todos, as\u00ed que esperamos que te haya sido \u00fatil y puedas tomar control del estilo de tu sitio con este conocimiento.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Si este post te result\u00f3 \u00fatil, <a href=\"https:\/\/wcanvas.com\/es\/blogs\/\">le\u00e9 nuestro blog<\/a> y <a href=\"https:\/\/wcanvas.com\/es\/resources\/\">recursos para desarrolladores<\/a> para obtener m\u00e1s ideas y gu\u00edas!<\/p>\n<!-- \/wp:paragraph -->","protected":false},"excerpt":{"rendered":"<p>Si est\u00e1s comenzando a explorar las numerosas opciones de estilo de WordPress, tal vez te est\u00e1s preguntando c\u00f3mo agregar bordes de texto a tu sitio de WordPress. Dependiendo de lo que quer\u00e9s lograr, a\u00f1adir bordes puede mejorar la presentaci\u00f3n de tu contenido y hacer que algunos elementos importantes se destaquen, as\u00ed que tiene sentido que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11730,"template":"","blog-categories":[80,77],"class_list":["post-12614","blogs","type-blogs","status-publish","has-post-thumbnail","hentry","blog-categories-diseno-web","blog-categories-paso-a-paso"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas<\/title>\n<meta name=\"description\" content=\"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas\" \/>\n<meta property=\"og:description\" content=\"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\" \/>\n<meta property=\"og:site_name\" content=\"White Canvas\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-14T19:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"528\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": [\n\t                \"Article\",\n\t                \"BlogPosting\"\n\t            ],\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\"\n\t            },\n\t            \"author\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"url\": \"https:\/\/wcanvas.com\/\"\n\t            },\n\t            \"headline\": \"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos)\",\n\t            \"datePublished\": \"2024-12-23T18:06:06+00:00\",\n\t            \"dateModified\": \"2025-03-14T19:32:00+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@type\": \"WebPage\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\"\n\t            },\n\t            \"wordCount\": 1240,\n\t            \"publisher\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"logo\": {\n\t                    \"@type\": \"ImageObject\",\n\t                    \"url\": \"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png\"\n\t                }\n\t            },\n\t            \"image\": [],\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg\",\n\t            \"inLanguage\": \"es\",\n\t            \"description\": null\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\",\n\t            \"name\": \"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg\",\n\t            \"datePublished\": \"2024-12-23T18:06:06+00:00\",\n\t            \"dateModified\": \"2025-03-14T19:32:00+00:00\",\n\t            \"description\": \"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"es\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"es\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage\",\n\t            \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg\",\n\t            \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg\",\n\t            \"width\": 1200,\n\t            \"height\": 528,\n\t            \"caption\": \"A WordPress developer using the browser's element inspector on a web page\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Blogs\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/blogs\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos)\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#website\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"name\": \"White Canvas\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/wcanvas.com\/es\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"es\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\",\n\t            \"name\": \"White Canvas\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"width\": 115,\n\t                \"height\": 32,\n\t                \"caption\": \"White Canvas\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"alternateName\": \"Wcanvas\",\n\t            \"contactPoint\": [\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+1 (347) 688 2902\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"US\",\n\t                    \"availableLanguage\": \"en\"\n\t                },\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+54 (11) 5236 4717\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"AR\",\n\t                    \"availableLanguage\": \"es\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198\",\n\t            \"name\": \"Nicolas Pisani\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"caption\": \"Nicolas Pisani\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/wcanvas.com\",\n\t                \"#\",\n\t                \"https:\/\/www.instagram.com\/whitecanvasteam\/\",\n\t                \"https:\/\/x.com\/wcanvas\"\n\t            ]\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas","description":"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.","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:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas","og_description":"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.","og_url":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/","og_site_name":"White Canvas","article_modified_time":"2025-03-14T19:32:00+00:00","og_image":[{"width":1200,"height":528,"url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#article","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/"},"author":{"@type":"Organization","name":"Wcanvas","url":"https:\/\/wcanvas.com\/"},"headline":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos)","datePublished":"2024-12-23T18:06:06+00:00","dateModified":"2025-03-14T19:32:00+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/"},"wordCount":1240,"publisher":{"@type":"Organization","name":"Wcanvas","logo":{"@type":"ImageObject","url":"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png"}},"image":[],"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg","inLanguage":"es","description":null},{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/","url":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/","name":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos) - White Canvas","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage"},"image":{"@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage"},"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg","datePublished":"2024-12-23T18:06:06+00:00","dateModified":"2025-03-14T19:32:00+00:00","description":"Aprend\u00e9 c\u00f3mo agregar bordes al texto en tu sitio de WordPress para que la informaci\u00f3n importante se destaque y mejore su presentaci\u00f3n.","breadcrumb":{"@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#primaryimage","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2024\/12\/text-border-HERO.jpg","width":1200,"height":528,"caption":"A WordPress developer using the browser's element inspector on a web page"},{"@type":"BreadcrumbList","@id":"https:\/\/wcanvas.com\/es\/blog\/como-agregar-bordes-de-texto-en-wordpress-2-metodos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wcanvas.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blogs","item":"https:\/\/wcanvas.com\/es\/blogs\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo agregar bordes de texto en WordPress (2 m\u00e9todos)"}]},{"@type":"WebSite","@id":"https:\/\/wcanvas.com\/es\/#website","url":"https:\/\/wcanvas.com\/es\/","name":"White Canvas","description":"","publisher":{"@id":"https:\/\/wcanvas.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wcanvas.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wcanvas.com\/es\/#organization","name":"White Canvas","url":"https:\/\/wcanvas.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","width":115,"height":32,"caption":"White Canvas"},"image":{"@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/"},"alternateName":"Wcanvas","contactPoint":[{"@type":"ContactPoint","telephone":"+1 (347) 688 2902","contactType":"sales","contactOption":"TollFree","areaServed":"US","availableLanguage":"en"},{"@type":"ContactPoint","telephone":"+54 (11) 5236 4717","contactType":"sales","contactOption":"TollFree","areaServed":"AR","availableLanguage":"es"}]},{"@type":"Person","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198","name":"Nicolas Pisani","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","caption":"Nicolas Pisani"},"sameAs":["https:\/\/wcanvas.com","#","https:\/\/www.instagram.com\/whitecanvasteam\/","https:\/\/x.com\/wcanvas"]}]}},"_links":{"self":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs\/12614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs"}],"about":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/types\/blogs"}],"author":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media\/11730"}],"wp:attachment":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media?parent=12614"}],"wp:term":[{"taxonomy":"blog-categories","embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blog-categories?post=12614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}