Question

Am trying to style a textarea with css but its not rendering correctly, a part of the border doesnt show.
Heres a screenshot

This is the css code for the textarea

#pheedform textarea {
    -moz-border-top-left-radius:4px;
    -moz-border-top-right-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-top-left-radius:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border:1px solid rgba(153,153,153,1);
    border-bottom:thin;
    width:100%;
    padding:4px;
}

And this the css code for the box beneath the textarea

 .pheed-options {
        background:#EEEEEE;
        border-top:none;
        padding:5px;
        position:relative;
        top:-7px;
        width:100%;
        border:1px solid #666666;
        border-right:1px solid #666666;
    }
    .pheedOptionItem {
        padding:5px;
        border-right:solid 1px #999999;
    }

And this the html

<div class="textarea_fix">
                <textarea name="pheed" cols="50" id="pheed">
                </textarea>
                 <div class="pheed-options">
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedAdd_photo">Add Photo</a>
                       </span>
                       <span class="pheedOptionItem"class="pheedOptionItem">
                       <a href="#" class="pheedPostToTwitter">Post to Twitter</a>
                       </span>
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedPostToFacebook">Post to Facebook</a>
                       </span>
                       <span>
                       <a href="#" class="pheedBtn">Pheed</a>
                       </span>
                </div>
                </div>

Answer 1

You should set both elements padding the same, either change #pheedform textareas padding to 5px or .pheed-options to 4px.