Muchas veces nuestros alumnos nos preguntan cómo poner un cuadro de texto en HTML. Sin embargo, lo primero que debemos tener en cuenta es que HTML sirve únicamente para definir el texto en pantalla. Para establecer su visualización o darle cualquier estilo es necesario emplear CSS.
En este artículo te muestro cómo hacerlo de una manera fácil y rápida. Además, te daré un código de ejemplo para que puedas copiarlo y pegarlo en tu documento CSS sin necesidad de escribirlo de nuevo.
¡Despega con nosotros y aprende cómo hacer un cuadro de texto en HTML!
Índice de Contenidos
Cómo hacer un recuadro en HTML: propiedades CSS
La manera más fácil de crear un cuadro de texto en HTML es mediante las propiedades border. Estas propiedades CSS nos permiten encuadrar un texto escrito en HTML de una manera sencilla, como en este ejemplo.
See the Pen Cómo hacer un recuadro en HTML by HTML Masters (@htmlmasters) on CodePen.
Las propiedades border que debes utilizar para crear un recuadro HTML son las siguientes:
- border-color: define el color del borde para tu recuadro HTML.
- border-style: asigna el estilo del borde del cuadro de texto.
- border-width: establece la anchura del borde de tu cuadro de texto en HTML.
Propiedad border-color
Border-color nos permite definir el color que queremos para el borde de nuestro recuadro HTML. Este color se puede definir de tres maneras:
- Valor hexadecimal.
- Sistema RGB.
- Sistema RGBA.
- Valores predefinidos (consúltalos aquí).
p {
border-color: red;
}
Propiedad border-style
Esta propiedad nos permite asignarle diferentes estilos de bordes a nuestro cuadro de texto en HTML con los siguientes parámetros:
- None.
- Hidden.
- Dotted.
- Dashed.
- Solid.
- Fouble.
- Groove.
- Ridge.
- Inset.
- Outset.
p {
border-style: solid;
}
Propiedad border-width
Por último, la propiedad border-width nos permite asignar un grosor a nuestro borde, lo cual es crucial al definir cómo hacer un cuadro de texto en HTML. Podemos usar valores específicos como px, em, rem, o bien estos parámetros generales:
- Thin (estrecho).
- Medium (medio).
- Thick (ancho).
p {
border-width: medium;
}
Cantidad de valores dentro de las propiedades
En estas tres propiedades, puedes incluir hasta cuatro valores. Esto te permite personalizar cada lado del recuadro HTML de manera independiente:
- Un valor: aplica el mismo valor a los cuatro lados del recuadro.
- Dos valores: el primero para los lados superior e inferior y el segundo para los lados izquierdo y derecho.
- Tres valores: el primero para el lado superior, el segundo para los lados izquierdo y derecho, y el tercero para el lado inferior.
- Cuatro valores: se aplica cada valor a cada lado en el orden superior, derecho, inferior e izquierdo.
p {
border-style: dashed;
border-color: red black;
border-width: medium thick thin thick;
}
Encuadrar textos usando solo la propiedad border
Sin embargo, todas estas propiedades se pueden resumir en una sola: border. Esta propiedad es un atajo que puede sustituir a las tres anteriores en una sola línea de código, facilitando cómo hacer un cuadro de texto en HTML. La manera de aplicarla es sencilla: después de la propiedad border, debemos asignar las características de color, grosor y estilo en cualquier orden.
A continuación, te mostramos un ejemplo práctico de cómo poner un cuadro de texto en HTML:
p {
border: solid #000 4px;
}
Conclusión
Como has visto, aunque HTML no ofrece una manera directa de crear recuadros, hacerlo con propiedades CSS es muy fácil. Ahora tienes las herramientas y conocimientos necesarios para crear un cuadro de texto en HTML y personalizarlo según tus necesidades.
¡Esperamos que este tutorial te haya sido útil y te invitamos a seguir explorando más sobre diseño web con nosotros!