There is a code (shown below), you need to make it so that instead of the black frame between the divines it is not visible, that instead of the black stripe there is a strip of the same color as the light square. I tried to put the border-top with the desired color at the square diva, but the frame is placed inside this diva, and the black one is near. Tell me how to implement it

.one { width: 100px; height: 50px; background: #735973; border: 1px solid #000; } .one2 { width: 50px; height: 50px; background: #ff5973; border-left: 1px solid #000; border-right: 1px solid #000; 
 <DOCTYPE HTML> <html> <head> </head> <body> <div> <div class="one"></div> <div class="one2"></div> </div> </div> </div> </body> </html>

2 answers 2

well, for <div class="one"></div> I would simply do the margin-bottom: -1px;

    You can use the pseudo-element ::after

     .one { width: 100px; height: 50px; background: #735973; border: 1px solid #000; } .one::after { display: block; content: ''; border-bottom: 1px solid #ff5973; width: 50px; position: relative; top: 50px; } .one2 { width: 50px; height: 50px; background: #ff5973; border-left: 1px solid #000; border-right: 1px solid #000; 
     <div> <div class="one"></div> <div class="one2"></div> </div>

    Or pseudo-element ::before

     .one { width: 100px; height: 50px; background: #735973; border: 1px solid #000; } .one2::after { display: block; content: ''; border-bottom: 1px solid #ff5973; width: 100%; position: relative; top: -1px; } .one2 { width: 50px; height: 50px; background: #ff5973; border-left: 1px solid #000; border-right: 1px solid #000; 
     <div> <div class="one"></div> <div class="one2"></div> </div>