CSS边框和动画

Question

<div id="parent">
<div id="left"></div>
<div id="right></div>
</div>

和css：

#left{
border-right:solid 1px black;
border-bottom-right-radius:10px;
}
#right
{
border-top:solid 1px black;
border-top-left-radius:10px;
}

这就是我在页面上的边框看起来如何，但我无法想象如何摆脱顶部的那个东西，右边的div左上角的边框半径设置为10px而左边的div设置为右下角同样的安排。现在的问题是它们之间的边界，它由左边的div和顶部保持，我不希望它看到一个小棍子遗骸，我该如何摆脱它？

和第二：尝试css3动画，一旦它一直运行（我在悬停时改变宽度）它跳回到原始...我怎么能做到这样宽度会改变，但只有去鼠标关闭后返回？ 动画代码：

@keyframes btn
{
0%{width:80%}
1000%{width:100%}
}
@-webkit-keyframes btn
{
0%{width:80%}
100%{width:100%}
}
.button:hover
{
animation:btn 1s;
}

Answer 1

部分解决方案是将左边的div向下移动10个像素，方法是给它一个与边界半径相同大小的上边距。

margin-top:10px;

Updated JSFiddle

然而，如果你这样做，右边div的圆角有一个问题：它在顶部开始为1像素宽，但在左边缩小到0像素宽，因为左边框宽度为0。 / p>

解决方案：给右边的div一个左边框。然后将整个事物向左移动1个像素，使边框重叠（否则，边框将并排）。

border-left:solid 1px black;
position:relative; left:-1px;

Even more updated JSFiddle