Changing CSS properties 'on-the-fly'

I've got this vertical slideshow navigable by up/down arrows. there's 7 items (divs) inside the slideshow's container div but only 3 of them are visible at a time. In truth, this slideshow is a menu - from the 3 items visible, the one in the middle is the one clickable, which will load content in a div somewhere else in the page.

Now, since there are 3 items and only the 2nd item (middle one) is clickable, I need to create a difference between them. So, I thought of changing the items border/border-radius like this:

The problem is that I don't have a clue on how to do that since the divs are constantly changing place in the visible area. I really need help here.

HTML markup:

<div id="rocksType_btns">
    <div id="rocksType_btnUp"></div>
    <div id="rocksType_btnDown"></div>
</div>

<div id="rocksType_subtypeSlider">
    <div id="rocksType_DBitems_container">
        <div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
        <div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
        <div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
        <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

I already have the CSS code defined for the before/current/after states - just need to assign them.

Here's a Fiddle.

Thanx.

Pedro