Div Border showing up at wrong place

I am trying to make a 'Site Under Development' page. I want to put border on the div-container which holds the title "under development" and one more line. But the border is showing up on the opposite sides. I have used 'border-top', 'border-left', 'border-style', 'border-color' separately, but it doesn't seem to work. Please tell me what i am doing wrong.

P.S.: Maybe its just a stupid mistake i am making, but i can't spot it :(

Here is the code -

body {
  background-color: #000000;
}
#underDevelopment {
  margin: 0px auto;
  width: 50em;
  padding: 1em;
  background-color: #000000;
  border-style: solid;
  border-color: #e2e2e2;
  border-top: 2px;
  border-left: 2px;
  display: block;
  clear: both;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <div id="underDevelopment">
        <div style="color: #ffffff; font-weight:bold;">
          UNDER DEVELOPMENT
        </div>
        <div style="color: #ffffff">
          This Website Is Currently Under Development. It Will Be Updated Soon, Visit Often So That You Donot Miss Anything.
        </div>
      </div>
 </body>
</html>

Solution

   #underDevelopment {
        margin: 0px auto;
        float: left;
        width: 50em;
        padding: 1em;
        background-color: #000000;
        border-style: solid;
        border-color: #e2e2e2;
        border-width: 2px 0px 0px 2px;
        display: block;
        clear: both;
    }

**Try this css. **