CODEWITHSUNDEEP
htmlcss
bebarules666
bebarules666

Reputation: 89

How to fill in a border in HTML?

I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:

<div style="width:200px;height:100px;border:6px outset orange;">text</div>

Upvotes: 3

Views: 69556

Answers (6)

Capagris
Capagris

Reputation: 3841

use the background property, for example:

background:#ccc;

which would leave your code looking like this:

<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>

Upvotes: 1

Debloper
Debloper

Reputation: 158

Here you go: http://jsfiddle.net/XVDkS/

Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN article for more details on box-shadows.

It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

you can use groove or ridge in place of outset,

See here is some examples for this on W3schools

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none

or if you want 2 borders and a different border then you try this

<div style="width:200px;height:100px;border:1px solid #000">
    <div style="width:190px;height:90px;border:5px solid orange">
    <div style="width:188px;height:88px;border:1px solid #000">
    test
    </div>
    </div>
</div>

Demo is here: http://jsfiddle.net/SPhec/

Upvotes: 0

Subin
Subin

Reputation: 3563

If you mean a background this will help

CSS

backgound:black;

HTMl with CSS

<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>

Upvotes: 0

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Use 

background:#fff

or any color; and one more advise never use inline css for optimal output use external CSS

<div id="something">text</div>

#something
{
  width:200px;
  height:100px;
 //likewise
}

Upvotes: 4

Anooj P
Anooj P

Reputation: 346

<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>

use css background property

Upvotes: 0

Related Questions