Comment définir une bordure pour une balise HTML div

193

J'essaie de définir une bordure autour d'une balise div en HTML. Dans certains navigateurs, la bordure n'apparaît pas.

Voici mon code HTML:

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Comment définir une bordure pour une balise HTML div?

RKh
la source

Réponses:

361

Essayez d'être explicite sur toutes les propriétés de bordure. Par exemple:

border:1px solid black;

Voir la propriété de raccourci Border . Bien que les autres bits soient facultatifs, certains navigateurs ne définissent pas la largeur ou la couleur par défaut. Dans votre cas, je parie que c'est la largeur qui est nulle, sauf indication contraire.

Paolo
la source
1
J'ai dû supprimer le suffixe "px".
samis
1
@samis Ce n'est pas ce que vous voulez faire.
Joel
29

peut utiliser

border-width:2px;
border-style:solid;
border-color:black;

ou en sténographie

border: 2px solid black
Yonks Somarl
la source
17

Selon le W3C:

Étant donné que la valeur initiale des styles de bordure est «aucun», aucune bordure ne sera visible à moins que le style de bordure ne soit défini.

En d'autres termes, vous devez définir un style de bordure (par exemple solid) pour que la bordure apparaisse. border:thindéfinit uniquement la largeur. De plus, la couleur sera par défaut la même que la couleur du texte (qui normalement n'a pas l'air bien).

Je recommande de définir les trois styles:

style="border: thin solid black"
Chèvre mécontente
la source
5

Je suppose que c'est là que vous pointez.

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Bien. il doit être écrit commeborder-width:thin

Ici vous allez avec le lien (cliquez ici) Découvrez les différents types de styles de bordure

vous pouvez également définir la largeur de la bordure en écrivant la largeur en termes de pixels. (comme border-width: 1px), la largeur minimale est de 1px.

InfantPro'Aravind '
la source
5

Vous pouvez utiliser:

border-style: solid;
border-width: thin;
border-color: #FFFFFF;

Vous pouvez toutefois les modifier comme bon vous semble.

Andoni Henderer
la source
2

Vous devez définir plus de champs que la largeur de la bordure. Le style met essentiellement la bordure sur la page. La largeur contrôle l'épaisseur et la couleur lui indique la couleur de la bordure.

border-style: solid; border-width:thin; border-color: #FFFFFF;
Jason Too Cool Webs
la source
1

Dans bootstrap 4, vous pouvez utiliser des utilitaires de bordure comme celui-ci.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-5 {
    border-width: 5px !important;
  }
</style>

<textarea class="border border-dark border-5">some content</textarea>

Penny Liu
la source
0
 .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 <div>
 @foreach (var item in Model)
{
<span> <img src="@item.Thumbnail"  class="centerImge" /></span>
  <h3 style="text-align:center">  @item.CategoryName</h3>
}
 </div>
Muhammad Armaghan
la source
-3
<style>
p{border: 1px solid red}
div{border: 5px solid blue}

Appelez-moi Ishmael.

Ne m'appelle pas tard pour le dîner.

Appelez-moi Ishmael.

Ne m'appelle pas tard pour le dîner.

Mosaab Labbi
la source