Cómo establecer un borde para una etiqueta div HTML

192

Estoy tratando de definir un borde alrededor de una etiqueta div en HTML. En algunos navegadores, el borde no aparece.

Aquí está mi código HTML:

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

¿Cómo configuro un borde para una etiqueta div HTML?

RKh
fuente

Respuestas:

358

Intenta ser explícito acerca de todas las propiedades del borde. Por ejemplo:

border:1px solid black;

Ver propiedad de taquigrafía de borde . Aunque los otros bits son opcionales, algunos navegadores no establecen el ancho o el color a los valores predeterminados que esperaría. En su caso, apostaría que es el ancho cero a menos que se especifique.

Paolo
fuente
1
Tuve que eliminar el sufijo "px".
samis
1
@samis Eso no es lo que quieres hacer.
Joel
29

puedo usar

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

o como taquigrafía

border: 2px solid black
Yonks Somarl
fuente
17

Según el W3C:

Dado que el valor inicial de los estilos de borde es 'ninguno', no habrá bordes visibles a menos que se establezca el estilo de borde.

En otras palabras, debe establecer un estilo de borde (p. Ej. solid ) para que aparezca el borde. border:thinsolo establece el ancho. Además, el color por defecto será el mismo que el color del texto (que normalmente no se ve bien).

Recomiendo configurar los tres estilos:

style="border: thin solid black"
Cabra descontento
fuente
5

Supongo que aquí es donde estás señalando ...

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

Bien. debe escribirse comoborder-width:thin

Aquí tienes el enlace ( haz clic aquí) mira los diferentes tipos de estilos de borde

también puede establecer el ancho del borde escribiendo el ancho en términos de píxeles ... (como border-width: 1px), el ancho mínimo es 1px.

InfantPro'Aravind '
fuente
5

Puedes usar:

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

Sin embargo, puede cambiarlos como mejor le parezca.

Andoni Henderer
fuente
2

Debe establecer más campos y luego solo ancho de borde. El estilo básicamente pone el borde en la página. Ancho controla el grosor, y el color le dice de qué color hacer el borde.

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

En Bootstrap 4, puede utilizar utilidades de borde como tal.

<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
fuente
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
fuente
-3
<style>
p{border: 1px solid red}
div{border: 5px solid blue}

Llámame Ismael

Simplemente no me llames tarde para cenar.

Llámame Ismael

Simplemente no me llames tarde para cenar.

Mosaab Labbi
fuente