I am trying to define a border around a div tag in HTML. In some browsers the border does not appear.

Here is my HTML code:

<div name="divActivites"> <textarea name="inActivities"> </textarea> </div>

How do I set a border for an HTML div tag?

0

8 Answers

Try being explicit about all the border properties. For example:

border:1px solid black;

See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.

2

can use

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

or as shorthand

border: 2px solid black

As per the W3C:

Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.

In other words, you need to set a border style (e.g. solid) for the border to show up. border:thin only sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).

I recommend setting all three styles:

style="border: thin solid black"

You can use:

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

You can change these as you see fit, though.

1

I guess this is where you are pointing at ..

<div name="divActivites"> <textarea name="inActivities"> </textarea> </div>

Well. it must be written as border-width:thin

Here you go with the link (click here) check out the different types of Border-styles

you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px.

0

You need to set more fields then just border-width. The style basically puts the border on the page. Width controls the thickness, and color tells it what color to make the border. 

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

In bootstrap 4, you can use border utilities like so. 

<script src=""></script> <link href="" rel="stylesheet" /> <script src=""></script> <style> .border-5 { border-width: 5px !important; } </style> <textarea>some content</textarea>
 .centerImge { display: block; margin-left: auto; margin-right: auto; width: 50%; height:50%; } <div> @foreach (var item in Model) { <span> <img src="@item.Thumbnail" /></span> <h3> @item.CategoryName</h3> } </div>