web-dev-qa-db-fra.com

Comment supprimer la bordure inférieure d'une boîte avec CSS

alt text

J'ai un div rectangulaire, comme celui ci-dessus. Je veux supprimer la bordure inférieure (de C à D) dans mon div. Comment puis-je faire ceci?.

Edit: Voici mon CSS:

#index-03 {
  position: absolute;
  border: .1px solid #900;
  border-width: .1px;
  border-style: solid;
  border-color: #900;
  left: 0px;
  top: 102px;
  width: 900px;
  height: 27px;
}
<div id="index-03" 
     style="background-color:limegreen; width:300px; height:75px;">
</div>
cssborder
21
Gandalf

Ajoutez simplement: border-bottom: none;

#index-03 {
    position:absolute;
    border: .1px solid #900;
    border-bottom: none;
    left:0px;
    top:102px;
    width:900px;
    height:27px;
}
61
DaiYoukai

Vous semblez mal comprendre le modèle de boîte - en CSS, vous fournissez des points pour le haut et la gauche, puis la largeur et la hauteur - ce sont tout ce qui est nécessaire pour qu'une boîte soit placée avec des mesures exactes.

La propriété width est ce que votre C-D l'est, mais c'est aussi ce que A-B est. Si vous l'omettez, la div n'aura pas de largeur définie et la largeur sera définie par son contenu.

Mise à jour (suite aux commentaires sur la question:

Ajouter un border-bottom-style: none; à votre CSS pour supprimer ce style uniquement en bas.

2
Oded

Vous pouvez soit définir

border-bottom: none;

ou

border-bottom: 0;

On définit le border-style à none.
On définit le border-width à 0px.

div {
  border: 3px solid #900;

  background-color: limegreen; 
  width:  28vw;
  height: 10vw;
  margin:  1vw;
  text-align: center;
  float: left;
}

.stylenone {
  border-bottom: none;
}
.widthzero {
  border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>

border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>

Note latérale:
Si jamais vous devez découvrir pourquoi une frontière ne s'affiche pas quand vous vous y attendez, il est également bon de savoir que l'un ou l'autre pourrait être le coupable. Vérifiez également le border-color n'est pas identique au background-color.

1
SherylHohman

Vous pouvez simplement définir la largeur sur auto. Ensuite, la largeur de la div sera égale à 0 si elle n'a pas de contenu.

width:auto;
0
DADU