El borde de la fuente CSS es una técnica utilizada para crear un contorno en forma de borde alrededor de caracteres de texto HTML. Esta técnica se utiliza para realzar la visibilidad o agregar un efecto decorativo al texto. Esto se puede lograr usando la propiedad de trazo de texto, que permite personalizar la apariencia del texto agregando un borde a su alrededor.
Cómo aplicar el borde de fuente en CSS
Existen dos métodos para aplicar bordes de fuente a elementos de texto en HTML:
Tabla de contenidos
Estudiemos estas propiedades CSS en detalle y comprendamos cómo se usan para colocar bordes de texto en HTML.
Usando la propiedad de sombra de texto
El Propiedad de sombra de texto en CSS agrega un efecto de sombra al texto, proporcionando profundidad y énfasis. Toma parámetros para desplazamientos horizontales y verticales, radio de desenfoque y color, lo que permite a los diseñadores crear varios efectos de sombra de texto para mejorar el atractivo visual.
Sintaxis:
text-shadow: h-shadow v-shadow blur-radius color;>
Valores de propiedad :
La propiedad text-shadow acepta muchos valores, algunos de ellos se mencionan en la siguiente tabla.
| El valor de la propiedad | Descripción |
|---|---|
h-shadow> | Establece la sombra horizontal alrededor del texto. |
v-shadow> | Establece la sombra vertical alrededor del texto. |
blur-radius> | Establece el radio de desenfoque alrededor de la sombra del texto. |
color> | Establece el color de la sombra del texto. |
none> | No establece nada alrededor del texto (sin sombra). |
initial> | Establece la sombra del texto en su valor inicial predeterminado. |
inherit> | Hereda los valores de propiedad de su elemento padre. |
Valor de retorno:
Devuelve un borde/sombra de fuente alrededor del texto.
Ejemplos de bordes de fuentes
Ejemplo 1: Este ejemplo utiliza la propiedad text-shadow para crear sombra en el texto.
execlpHTML
Título de propiedad de sombra de texto CSS><style>h1 { sombra de texto: 0 0 3px #FF0000, 0 0 5px #0000FF; } estilo> cabeza> <body> <h1>techcodeview.comh1>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="CSS de sombra de texto"><p dir='ltr'> <b> <strong>Ejemplo 2:</strong> </b> <span>Este ejemplo utiliza la propiedad text-shadow para crear texto con bordes.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Título de propiedad de sombra de texto CSS><!-- Style to use text-shadow property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; sombra de texto: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="texto con borde CSS"><h2 id='using-textstroke-property'> <b> <strong>Usando la propiedad de trazo de texto</strong> </b> </h2><p dir='ltr'><span>El</span> <span>Propiedad de trazo de texto</span> <span>se utiliza para agregar trazo al texto. Esta propiedad se puede utilizar para cambiar el ancho y el color del texto. Esta propiedad se admite mediante el uso del prefijo -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Ejemplo</strong> </b> </h3><p dir='ltr'><span>Este ejemplo utiliza la propiedad de trazo de texto para crear texto con borde.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Título de propiedad de trazo de texto CSS><!-- Style to use text-stroke property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; -webkit-texto-trazo-ancho: 1px; -webkit-text-trazo-color: negro; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Navegador compatible:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Borde</span> <span> </span> <span>12</span></li><li value='3'> <span>Firefox</span> <span>1</span></li><li value='4'> <span>Ópera</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web al diseñar sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo esto</span> <span>Tutorial CSS</span> <span>y</span> <span>Ejemplos de CSS</span> <span>.</span></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/ejb-tutorial/">Tutorial Ejb</a> </li><li> <a href="/microsoft-azure-tutorial/">Tutorial De Microsoft Azure</a> </li><li> <a href="/max-heap/">Montón Máximo</a> </li><li> <a href="/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022</a> </li><li> <a href="/javascript-tutorial/">Tutorial De Javascript</a> </li><li> <a href="/python-numpy-random/">Python Numpy-Aleatorio</a> </li><li> <a href="/english-grammar/">Gramática Inglesa</a> </li><li> <a href="/java-collections/">Colecciones Java</a> </li><li> <a href="/dfs/">Dfs</a> </li><li> <a href="/android-tutorial/">Tutorial De Android</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Factores de 36</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Obtén la lista de factores de 36 y aprende cómo obtenerlos usando el método de factorización prima en este artículo.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/factors-36"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sub-string-divisibility-by-3-queries">Divisibilidad de subcadenas por 3 consultas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/fibonacci-series-c">Serie de Fibonacci en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/type-isinstance-python">escriba e isinstance en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-arab-countries">Lista de países árabes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/xhtml-introduction">Introducción a XHTML</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/how-many-keys-are-computer-keyboard">cuantas teclas tienen los teclados</a>
</li><li><a href="/normalization">1nf 2nf 3nf</a>
</li><li><a href="/java-scanner">escáner escanear java</a>
</li><li><a href="/java-convert-char-string">convertir caracteres a cadenas java</a>
</li><li><a href="/how-sort-list-java">java ordenando una lista</a>
</li><li><a href="/c-stl-set">conjunto c ++</a>
</li><li><a href="/von-neumann-model">arquitectura von neumann</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//cs.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>