Input con Esquinas Redondeadas con CSS

12/04/2023

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

En este pequeño y simple tutorial te explico como puedes aplicar estilos al elemento input para que tenga las esquinas redondeadas.

Fichero CSS

En tu fichero de estilos, o dentro de la etiqueta <style>, escribe el siguiente código CSS para aplicar estilos al elemento input:

/* Estilos para el elemento input */
input[type="text"] {
  /* Establece el ancho y la altura del input */
  width: 300px;
  height: 40px;

  /* Aplica esquinas redondeadas */
  border-radius: 10px;

  /* Define el color del borde y su grosor */
  border: 1px solid #000;

  /* Establece el tamaño y estilo de la fuente */
  font-size: 14px;
  font-family: Arial, sans-serif;

  /* Añade un poco de espacio interior (padding) */
  padding: 8px 12px;

  /* Establece el color de fondo y el color del texto */
  background-color: #fff;
  color: #000;

  /* Añade una transición suave al cambiar el estilo */
  transition: all 0.3s;
}

/* Estilos para el input al enfocarse (cuando el cursor está dentro) */
input[type="text"]:focus {
  /* Cambia el color del borde al enfocar */
  border-color: #007BFF;

  /* Aumenta el tamaño del borde al enfocar */
  border-width: 2px;
}

Después, dentro de la etiqueta <body> de tu fichero HTML, agrega el siguiente código para incluir un elemento input:

<input type="text" placeholder="Escribe aquí">

Al abrir este archivo HTML en un navegador, verás un campo de entrada (input) con esquinas redondeadas y estilos personalizados. Además, notarás un cambio en el color y grosor del borde cuando el input esté enfocado (al hacer clic dentro del campo de entrada).

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir