css - Border is missing

Question

I can't figure out why the border isn't showing up. I have a main wrapper that encapsulates all the elements; I'm just making the background of each element a transparent white, and then adding a transparent white border to the wrapper.

http://violetoeuvre.com/

/* Wrapper - Main *********/    
.main_wrapper{ 
        display:block;
        background: rgba(255,0,0,.5);
        width:1000px;
        height: 2000px;
        margin-left:18%;
        margin-top:7%;
        border:10px;
        border-color: rgba(255,255,255,.5);
}

html

<div class="main_wrapper">

<!-- Logo _____________________________________________________-->

<div class="logo">
    <a href="index.html"><img alt="emma carmichael" height="150px"
            src="images/Home/emma-logo.png"></a>
</div>

<!---Navigation Menu ______________________________________________-->

    <div id="main_menu" class="wrapper_nav_box">
        <div class="nav_box">
            <a href="writing.html">WRITING</a> 
        </div>
        <div class="nav_box">
            <a href="http://tumblr.com">BLOG</a>
        </div>
        <div class="nav_box">
            <a href="contact.html">CONTACT</a>
        </div>
    </div>

Any ideas?

Answer 1

As @Lotus said:

You forgot to include the border-style

As an altenative to use the shorthand as Lotus suggested, you could do like this:

.main_wrapper
{ 
    /*other stuff*/
    border-width: 10px;
    border-style: solid;
    border-color: rgba(255,255,255,.5);
}

---

Note: I add this to extend on Lotus's answer, and to help to answer @Claire's comment "i know i should use shorthand, but why wouldn't the other way work?"