CSS : border-bottom div의 길이를 제한하는 방법?

Question

아래 사진은 2 개의 div가 있습니다. 1은 로그인 양식이있는 부분이고 다른 하나는 페이스 북과 트위터에있는 단추입니다. 그런 다음 테두리를 넣고 싶지만 특정 길이의 테두리를 넣으려면 빨간색 상자가 있어야합니다. . 850 픽셀 및 상기 제이다 :

제 DIV의 폭은 30 % 제 위에!

은 내가 설명했다 희망!

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; 
} 

나는 또 다른 질문을했습니다, 어떻게 종료 또는 두 번째 DIV #topsocial 상단에서 상자 그림자를 삭제 하시겠습니까?

Answer 1

하여 테두리와 상자 및 제 <div>의 크기 제 <div> 절대 위치에 배치 될 수 설정 테두리를 커버 할 수있다.

저는 어떻게 작성했는지 보여주기 위해 jsFiddle을 만들었습니다. 우리는 HTML을 가지고 있지 않아 어쨌든 도움이 되길 바랬습니다.

Answer 2

마크 업 및 CSS를 공급하는 것이 더 유용한 답변을 얻을 도움이 될,하지만 첫 번째 제안은 로그인 폼과 DIV > <을 감싸는 850 픽셀 내부의 둥근 테두리를 포함하는 새로운 < 사업부 >을하는 것입니다. 그런 다음 페이스 북과 트위터 블록 왼쪽에있는 <div> 너비를 설정하고 경계선을 약간 겹치십시오. 그런 다음 30 % <div>을 맨 위로 확장하십시오.

UPDATE : http://jsfiddle.net/zFa9n/

Answer 3

CSS 코드의 화면 너비에 맞게 잘 동작하는 코드를 약간 변경하고 원하는 결과를 얻었 으면 좋겠어요.

#top { 
    height:50px; 
    background:white; 
    border: 5px solid black; 
    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); 
} 

#topsocial{ 
    position: relative; 
    top:-5px; 
    width:30%; 
    float:right; 
    padding: 5px; 
    border: 5px solid black; 
    border-top: none; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    -moz-border-radius-bottomright: 4px; 
    background:white; 
    overflow:hidden; 
    -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); 
}