Question

the picture below has 2 divs, 1 is the part where the login form and the other is where the buttons on facebook and twitter, then I want is to put a border but with a specific length, which would where is the red box.

The width of first div is: 850px and the second is: 30% over the first!

I hope I have explained!

HTML

<div id="top">
    <!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span><a href="#login" id="inicia">Inicia sesión</a> ó <a href="registro.php" id="registro">registrate!</b></span>-->
    <div id="loginform">
        <form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
            <input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
            <input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
            <a href="#login" id="dologin" name="dologin">Iniciar</a> ó
            <a href="registro.php" id="dosignup" name="dosignup">Registrarse</a>
            <span id="errorlogin"></span>
        </form>
    </div>
    <span id="currentUser"></span>

    <!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
    <ul id="socialmedia">
        <li><a href="http://www.twitter.com"><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></a></li>
        <li><a href="http://www.facebook.com"><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></a></li>
    </ul>
</div>

CSS

#top {
    height:50px;
    background:white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-bottom:none;
}
#topsocial{
    width:30%;
    padding: 5px;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%;
    background:white;
    overflow:hidden;
    float:right;
    position: relative;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-top: none;
}

I’ve have another question, how quit or delete box-shadow from top to second div #topsocial?

Answer 1

You can set the first <div> to the size of the box with the border and the second <div> can be placed in absolute position and cover the border.

I’ve made a jsFiddle to show you how to do it. We don’t have your HTML so I hoped it helps anyway.