CSS Simple Thing doesn’t seem to work

I have the following CSS code:

.special {
  height: 20px;
  width: 125px;
  border-bottom: 0px #69D2E7;
  border-radius: 10px 10px 0px 0px;
  background-color: #69D2E7;
  text-align: center;
  color: #FFFFFF;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:normal;
  letter-spacing:1px;
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: 500ms;
  text-transform: uppercase;
  right: 0px;
  position: fixed;
  bottom: 0px;
  z-index: 6969;
}
.special:hover {
  tranisition: opacity 500ms, border-bottom 500ms;
  opacity: 1.5;
  border-bottom: 200px #69D2E7;
}

I’m trying to make it so when hovered, it gets bigger (border-bottom height increases), and opacity changes. Opacity does, with the element I have, but the height doesn’t increase. What am I doing wrong ? http://jsfiddle.net/7U3xn/

Here’s an example to see how it works.


solution

You need to add a border-style. For instance, you can use solid:

UPDATED EXAMPLE HERE

.special:hover {
  transition: opacity 500ms, border-bottom 500ms;
  opacity: 1.5;
  border-bottom: 200px solid #69D2E7;
}

Also, fix the typo as MarcB points out. It should be transition not tranisition.