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?

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.


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

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"

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.


5

Puedes usar:

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

Sin embargo, puede cambiarlos como mejor le parezca.


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;

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>


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>

-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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.