Cómo establecer un borde para una etiqueta DIV HTML


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?

Author: VVV, 2010-01-07

8 answers

Intente ser explícito sobre todas las propiedades de borde. Por ejemplo:

border:1px solid black;

Ver Propiedad abreviada de frontera. Aunque los otros bits son opcionales, algunos navegadores no establecen el ancho o el color por defecto. En tu caso apostaría que es el ancho que es cero a menos que se especifique.

 276
Author: Paolo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-01-07 13:18:29

Puede usar

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

O como abreviatura

border: 2px solid black
 24
Author: Yonks Somarl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-11 09:21:05

Según el W3C:

Dado que el valor inicial de los estilos de borde es 'none', ningún borde será visible a menos que se establezca el estilo de borde.

En otras palabras, debe establecer un estilo de borde (por ejemplo, solid) para que aparezca el borde. border:thin solo 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"
 14
Author: DisgruntledGoat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-01-07 13:37:35

Supongo que aquí es donde estás apuntando ..

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

Bueno. debe escribirse como border-width:thin

Aquí tienes el enlace (haz clic aquí) echa un vistazo a 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.

 4
Author: InfantPro'Aravind',
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-15 13:31:41

Puedes usar:

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

Puedes cambiarlos como mejor te parezca.

 4
Author: Andoni Henderer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-15 22:06:10

Necesita establecer más campos y luego solo border-width. El estilo básicamente pone el borde en la página. Width controla el grosor, y color le dice qué color hacer el borde.

border-style: solid; border-width:thin; border-color: #FFFFFF;
 2
Author: Jason Too Cool Webs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-03 17:43:38
 .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>
 0
Author: Muhammad Armaghan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-23 13:59:33

En bootstrap 4, puede utilizar border utilities así.

<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
Author: Yi-Ting Liu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-06 09:21:09