Ejercicios de práctica de CSS

Formulario con bordes redondeados y cambio de color en el borde al enfocar

Este formulario tiene campos con bordes redondeados y un cambio de color en el borde cuando se hace foco en ellos.

CSS:

                form input {
                    border-radius: 8px;
                    border: 2px solid #ccc;
                    padding: 10px;
                    margin: 10px 0;
                    width: 100%;
                    box-sizing: border-box;
                    transition: border-color 0.3s ease;
                }

                form input:focus {
                    border-color: #3498db;
                    outline: none;
                }
            

HTML:

                <form>
                    <label for="name">Nombre:</label>
                    <input type="text" id="name" name="name" placeholder="Tu nombre">

                    <label for="email">Correo electrónico:</label>
                    <input type="email" id="email" name="email" placeholder="Tu correo">

                    <label for="message">Mensaje:</label>
                    <textarea id="message" name="message" placeholder="Tu mensaje"></textarea>

                    <button type="submit">Enviar</button>
                </form>