Input con Esquinas Redondeadas con CSS

hace 1 año · Actualizado hace 1 año

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

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