Input con Esquinas Redondeadas con CSS

hace 2 años · Actualizado hace 2 años

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).