Issues in slideout control UI - css

Question

I am bit new to CSS/bootstrap style programming.
I am trying to create a SlideOut control. Please refer the working code in URL .
I am facing some issues as listed below
I am not able to get the curve on the left side of the button i.e. Top-Left and Bottom-Left (Please refer snapshot)
I want to increase the size of the Feedback area i.e. want to have the height and width as 500px each. But When I try chaning it in the CSS #slideout_inner, the slide out doesn't happen properly/smoothly.
I want to implement this slideout control using HTML and CSS/bootstrap only and don't want to use JQuery in it.
Can anyone please help me with this issues?
Space getting added inbetween the Button and the innerarea,

Answer 1

Border:
turn your border radius around
It should be like this
border-radius: 5px 0 0 5px;
/* here is the pattern */
border-radius: top-right top-left bottom-left bottom-right
Sizing:
You have to change the sizing in 3 places
#slideout:hover {
right: here;
}
#slideout_inner textarea {
display: block;
margin: 15px;
width: here;
height: 200px;
}
#slideout_inner textarea {
width: here;
height: 100px;
margin-bottom: 6px;
}
Demo:
#slideout {
position: fixed;
top: 40px;
right: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#slideout_inner {
position: fixed;
top: 40px;
right: -550px;
background: #6DAD53;
width: 500px;
padding: 25px;
height: 130px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
text-align: right;
-webkit-border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
#slideout_inner textarea {
width: 490px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
right: 550px;
}
#slideout:hover #slideout_inner {
right: 0;
}
<div id="slideout">
<img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" />
<div id="slideout_inner">
<form>
<textarea></textarea>
<input type="submit" value="Post feedback">
</form>
</div>
</div>