CSS Border и анимация

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.

Решение: дайте правый div левой границе, а также. А затем переместите все 1 пиксель влево, поэтому границы перекрываются (в противном случае границы будут бок о бок).

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

Even more updated JSFiddle