Como definir uma borda para uma tag div HTML


192

Eu estou tentando definir uma borda em torno de uma marca div em HTML. Em alguns navegadores, a borda não aparece.

Aqui está o meu código HTML:

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

Como faço para definir uma borda para uma tag div HTML?

Respostas:


358

Tente ser explícito sobre todas as propriedades da borda. Por exemplo:

border:1px solid black;

Consulte Propriedade abreviada de borda . Embora os outros bits sejam opcionais, alguns navegadores não definem a largura ou a cor para o padrão esperado. No seu caso, aposto que a largura é zero, a menos que especificado.


1
Eu tive que remover o sufixo "px".
Samis

1
@ samis Isso não é o que você quer fazer.
Joel

29

pode usar

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

ou como taquigrafia

border: 2px solid black

17

Conforme o W3C:

Como o valor inicial dos estilos de borda é 'none', nenhuma borda será visível, a menos que o estilo da borda esteja definido.

Em outras palavras, você precisa definir um estilo de borda (por exemplo solid) para a borda aparecer. border:thinapenas define a largura. Além disso, por padrão, a cor será igual à cor do texto (que normalmente não parece boa).

Eu recomendo definir todos os três estilos:

style="border: thin solid black"

5

Eu acho que é para onde você está apontando ..

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

Bem. deve ser escrito comoborder-width:thin

Aqui você vai com o link (clique aqui), confira os diferentes tipos de estilos de borda

você também pode definir a largura da borda, escrevendo a largura em termos de pixels. (como largura da borda: 1 px), a largura mínima é 1 px.


5

Você pode usar:

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

Você pode alterá-las como achar melhor.


2

Você precisa definir mais campos do que apenas a largura da borda. O estilo basicamente coloca a borda na página. A largura controla a espessura e a cor indica qual cor criar a borda.

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

1

No bootstrap 4, você pode usar utilitários de borda como esse.

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

Me chame de Ismael.

Só não me ligue tarde para o jantar.

Me chame de Ismael.

Só não me ligue tarde para o jantar.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.