Css 连接输入字段的错觉

我试图重新创建输入字段的引导外观，使它们看起来在一个框中连接在一起，如下所示：

有人能帮我用CSS来创建这个效果吗

HTML:

<div>
   <input type='text' placeholder='email' />
   <input type='text' placeholder='password' />
</div>

---

有多种选择，但一般来说，您必须使用边距、边框和边框半径。例如：

Html:

---

请记住，您可以单独设置边界半径，以便：

.joined input{
  -webkit-appearance: none;
   -moz-appearance:   none;
   appearance:        none;
   border:1px solid;
   display:block;
   margin:0;
   padding:4px;
}

.joined input:nth-child(1) {
  border-radius: 4px 4px 0 0;
}
.joined input:nth-child(2) {
  border-radius: 0 0 4px 4px;
  border-top: none;
}

---

下面是一个示例：

尝试为每个元素填充底部。请同时显示您的html

input{
    display:block;
    margin:0px;
    padding:0px;
    line-height:0px;
    border:1px solid gray;
}

input.topInput{
    border-radius:4px 4px 0px 0px;
    border-bottom:none;
}

input.bottomInput{
    border-radius:0px 0px 4px 4px;
}

.joined input{
  -webkit-appearance: none;
   -moz-appearance:   none;
   appearance:        none;
   border:1px solid;
   display:block;
   margin:0;
   padding:4px;
}

.joined input:nth-child(1) {
  border-radius: 4px 4px 0 0;
}
.joined input:nth-child(2) {
  border-radius: 0 0 4px 4px;
  border-top: none;
}