如何围绕多个元素制作适当的边框

Question

I still trying to learn html/css and flex box. I currently workiong on a search bar and I want to add a boder arond two icon and a placeholder. However, I'm actually just able to place a boder aroud thoses elements separatly or to the box, that is to large from what I whant do. Can someone plese help me ?

 div.rechercheBar { background-color: red; display: flex; border: 0.5px solid blueviolet; } div.rechercheBarMobile { display: none; } div.buttonLocalisationIcon { background-color: lightgrey; display: flex; width: 50px; height: 50px; border-radius: 10px 0px 0px 10px; align-items: center; display: flex; align-items: center; justify-content: center; } input.searchBar { height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonResearch { width: 150px; height: 50px; background-color: #0065FC; color: #DEEBFF; border-radius: 0px 10px 10px 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; } div.buttonResearch:hover { background-color: #DEEBFF; color: #0065FC; border-radius: 10px; } /*Format mobile*/ div.rechercheBar { display: none; } div.rechercheBarMobile { display: flex; align-items: center; justify-content: center; width: 100%; border: 0.5px solid pink; /*Erreur ICI: met la bordure trop grande*/ } div.buttonMagnifyingGlass { width: 10%; height: 50px; background-color: #0065FC; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; } input.searchBarMobile { width: 70%; height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonMagnifyingGlass:hover { height: 50px; background-color: red; color: #0065FC; border-radius: 10px; }

 <div class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 1

You're already part of the way there with the border-radius attribute, you just need to define the actual border attribute. I did it the shorthand way but here's a breakdown of the attribute itself: https://developer.mozilla.org/en-US/docs/Web/CSS/border Worth noting that the border attribute has quite a bit of customization options and there's also an explanation of border versus outline in the article just in case you ever decide to use an outline for something instead.

 div.rechercheBar { background-color: red; display: flex; border: 0.5px solid blueviolet; } div.rechercheBarMobile { display: none; } div.buttonLocalisationIcon { background-color: lightgrey; display: flex; width: 50px; height: 50px; border: 1px solid black; border-radius: 10px 0px 0px 10px; align-items: center; justify-content: center; } input.searchBar { height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonResearch { width: 150px; height: 50px; background-color: #0065FC; color: #DEEBFF; border-radius: 0px 10px 10px 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; } div.buttonResearch:hover { background-color: #DEEBFF; color: #0065FC; border-radius: 10px; } /*Format mobile*/ div.rechercheBar { display: none; } div.rechercheBarMobile { display: flex; align-items: center; justify-content: center; width: 100%; border: 0.5px solid pink; /*Erreur ICI: met la bordure trop grande*/ } div.buttonMagnifyingGlass { width: 10%; height: 50px; background-color: #0065FC; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid black; border-radius: 10px; } input.searchBarMobile { width: 70%; height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonMagnifyingGlass:hover { height: 50px; background-color: red; color: #0065FC; border-radius: 10px; }

 <div class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 2

For icons border you can use border: 1px solid black; and for placeholder border you can use ::-webkit-input-placeholder

 div.rechercheBar { background-color: red; display: flex; border: 0.5px solid blueviolet; } div.rechercheBarMobile { display: none; } div.buttonLocalisationIcon { background-color: lightgrey; display: flex; width: 50px; height: 50px; border-radius: 10px 0px 0px 10px; align-items: center; display: flex; align-items: center; justify-content: center; border: 1px solid black; } input.searchBar { height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonResearch { width: 150px; height: 50px; background-color: #0065FC; color: #DEEBFF; border-radius: 0px 10px 10px 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; } div.buttonResearch:hover { background-color: #DEEBFF; color: #0065FC; border-radius: 10px; } /*Format mobile*/ div.rechercheBar { display: none; } div.rechercheBarMobile { display: flex; align-items: center; justify-content: center; width: 100%; border: 0.5px solid pink; /*Erreur ICI: met la bordure trop grande*/ } div.buttonMagnifyingGlass { width: 10%; height: 50px; background-color: #0065FC; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; border: 1px solid black; } input.searchBarMobile { width: 70%; height: 50px; display: flex; align-items: center; justify-content: center; border: none; padding: 20px; } div.buttonMagnifyingGlass:hover { height: 50px; background-color: red; color: #0065FC; border-radius: 10px; } .searchBarMobile::-webkit-input-placeholder { border-style:solid; border-width:thin 1px ; } .searchBarMobile:-moz-placeholder { border-style:solid; border-width:thin 1px; } .searchBarMobile:-ms-input-placeholder { border-style:solid; border-width:thin 1px; }

 <div class="rechercheBar"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBar" type="search" placeholder="Marseille, France"> <div class="buttonResearch">Rechercher</div> </div> <div class="rechercheBarMobile"> <div class="buttonLocalisationIcon"> <i class="fa-solid fa-location-dot"></i> </div> <input class="searchBarMobile" type="search" placeholder="Marseille, France"> <div class="buttonMagnifyingGlass"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div>

Answer 3

Thanks you for your answer. Here what I did finally:

div.buttonLocalisationIcon {
    background-color: lightgrey;
    display: flex;
    width: 7%;
    height: 50px;
    border-radius: 10px 0px 0px 10px;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top:  0.5px solid lightslategray;
    border-bottom:  0.5px solid lightslategray;
    border-left:  0.5px solid lightslategray;
}
input.searchBar{
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 20px;
    border-top:  0.5px solid lightslategray;
    border-bottom: 0.5px solid lightslategray;
}
div.buttonResearch {
    width: 150px;
    height: 50px;
    background-color: #0065FC;
    color: #DEEBFF;
    border-radius: 0px 10px 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top:  0.5px solid lightslategray;
    border-bottom:  0.5px solid lightslategray;
    border-right:  0.5px solid lightslategray;

}