<div className="mb-4">
            <label className="block text-sm text-gray-400 mb-1">Password</label>
            <div className="relative">
              <Lock className="absolute left-3 top-3 text-gray-500" size={18} />
              <motion.input
                ref={passwordInputRef}
                type={showPassword ? "text" : "password"}
                name="password"
                className="w-full pl-10 pr-12 py-2 rounded-lg border bg-surface-a20 text-gray-400 border-surface-a10 focus:border-primary-a50 focus:outline-none"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                autoComplete="current-password"
                required
                style={{
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "#6d7280",
                }}
              />
              <div
                onClick={togglePasswordVisibility}
                className="absolute right-3 top-3 cursor-pointer text-gray-500"
              >
                {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
              </div>
            </div>
          </div>

Does anyone know why the corners on the border are a bit thicker for the password input specifically? I have no other issue like that for other input types