En este post te muestro como realizar un formulario de tipo Registro de Usuarios, con un elegante diseño y ademas es totalmente responsive, lo cual significa que se adapta a cualquier dispositivo desde móviles hasta navegadores de escritorio.

 Como siempre te dejo el código HTML y los estilos CSS, recordando que todos los archivos que ocupes van dentro de una sola carpeta.

 Puedes usar alguno de los siguientes editores:


Este código va dentro de una archivo con extensión .HTML

<!Doctype HTML>
<html>
    <head>
        <title>Formulario en HTML</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="EstilosCSS/formulario.css">
    </head>
    <body>
       <h1>Formulario de Registro</h1>
        <form class="form-register">
            <h2 class="form-Titulo">Crea una cuenta</h2>
            <div class="contenedor">
                <input type="text" name="nombre" placeholder="Nombre" class="input-45" required>
                <input type="text" name="apellidos" placeholder="Apellidos" class="input-45" required>
                <input type="email" name="correo" placeholder="alguien@ejemplo.com" class="input-100" required>
                <input type="text" name="usuario" placeholder="Usuario" class="input-45" required>
                <input type="password" name="clave" placeholder="Contraseña" class="input-45" required>
                <input type="text" name="telefono" placeholder="Telefono" class="input-100" required>
                <div class="radio-checkbox">
                    <div class="radio">
                        <div class="radio-100">
                            <input type="radio" name="sexo" id="hombre">
                            <label for="hombre">Hombre</label>
                        </div>
                        <div class="radio-100">
                            <input type="radio" name="sexo" id="mujer">
                            <label for="mujer">Mujer</label>
                        </div>
                    </div>
                    <div class="checkbox-100">
                        <input type="checkbox" name="terminos" id="terminos" class="checkbox-100">
                        <label for="terminos">Acepto los terminos y condiciones</label>
                    </div>
                </div>
                <input type="submit" value="Registrar" id="btn-Registrar">
                <p class="form-link">¿Ya tienes una cuenta <a href="#">Ingresa Aqui</a></p>
            </div>
        </form>
    </body>
</html>

Estilo CSS
El siguiente código va dentro de la carpeta de estilo CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(../Imagenes/fondo.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    font-family: 'Montserrat';
}

h1 {
    color: #FFF;
    text-align: center;
}

.form-register {
    width: 90%;
    margin: auto;
    background: rgba(130,130,130,0.3);
    border-radius: 10px;
    transition: all 0.5s;
}

.form-Titulo {
    text-align: center;
    color: #FFF;
    padding: 20px;
    border-bottom: 5px solid rgba(230,52,74,0.7);
}

.contenedor {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: all 1s;
}

input {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    background: rgba(0,0,0,0.1);
    color: #000;
    font-weight: bold;
}

input:focus {background-color: rgba(230,52,74,0.5);}

::-webkit-input-placeholder {
    color: #FFF;
}

.input-45 {
    width: 45%;
}

.input-100 {
    width: 100%;
}

#btn-Registrar {
    width: 100%;
    margin: auto;
    background: #E6344A;
}

#btn-Registrar:hover {
    background: #2DADFC;
    cursor: pointer;
}

.form-link {
    width: 100%;
    margin: 10px;
    text-align: center;
}

.radio-checkbox {
    width: 100%;
    padding: 10px;
}

.form-register input[type="radio"],
.form-register input[type="checkbox"] {
    display: none;
}

.radio-100, .checkbox-100 {
    width: 100%;
    padding: 10px;
}

.form-register .radio-checkbox label {
    color: #0074D9;
    padding: 5px 15px 5px 51px;
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.9s ease;
}

.form-register .radio-checkbox label:hover {
    background: rgba(0,116,217,0.3);
}

.form-register .radio-checkbox label:before {
    content: "";
    width: 17px;
    height: 17px;
    display: inline-block;
    background: none;
    border: 3px solid #0074D9;
    position: absolute;
    left: 17px;
    border-radius: 50%;
    transition: all 0.9s ease;
}

.form-register .radio-checkbox .checkbox-100 label:before {
    border-radius: 3px;
}

.form-register input[type="radio"]:checked + label,
.form-register input[type="checkbox"]:checked + label {
    padding: 5px 15px;
    background: #0074D9;
    border-radius: 5px;
    color: #FFF;
}

.form-register input[type="radio"]:checked + label:before,
.form-register input[type="checkbox"]:checked + label:before {
    display: none;
}

@media (min-width: 1024px) {
    .form-register {
        width: 500px;
    }
}

Resultado Final
Así se muestra en una pantalla de 480px o Móviles.

Así se muestra en una pantalla de 768px o Tablets.

Así se muestra en una pantalla de 1024px o Navegadores de escritorio.