How do you create borders around text?

andypandyrox456 · April 4th, 2010, 05:28 PM

The title says it all. Is there any way to add a border around a few words?

PeterPeiGuo · April 4th, 2010, 05:39 PM

Code:

<html>
<head>
<style>
span.text-with-border {
	border-style: outset;
	border-width: 1px;
	border-color:red;
}
</style>
</head>
<body>
Hello <span class="text-with-border">world</span>!
</table>
</body>
</html>

PeterPeiGuo · April 4th, 2010, 05:42 PM

Another example with more flexibility demonstrated:

Code:

<html>
<head>
<style>
span.tea-cup {
	border-style: none solid solid solid;
	border-width: 1px;
	border-color:red;
}
</style>
</head>
<body>
A cup of <span class="tea-cup">tea</span>!
</table>
</body>
</html>

andypandyrox456 · April 4th, 2010, 06:08 PM

Thanks so much!
One more question - I have a long list. It is ordered using the alphabet, and i think it goes until H, so as you can see, it's a long list. If I want to place a border around it, would I use the span element, or the div element, or something else?
And must I use the span/div element, or can I use a different element. For example: Can I make everything in bold have a border simply by using the bold element in a CSS style sheet?

PeterPeiGuo · April 4th, 2010, 06:17 PM

One way is, like you said, use div. You can also use ol, ul, li, and all three are defined in HTML 4.01 specification.

Code:

<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	width: 40%
}
li {
	list-style: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>

andypandyrox456 · April 4th, 2010, 06:21 PM

Quote:

Originally Posted by PeterPeiGuo

One way is, like you said, use div. You can also use ol, ul, li, and all three are defined in HTML 4.01 specification.

Code:

<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	width: 40%
}
li {
	list-style: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>

I tried that, and it didn't work. But I"ll try again.

PeterPeiGuo · April 4th, 2010, 06:25 PM

Difference between browsers...

PeterPeiGuo · April 4th, 2010, 06:39 PM

The following works for IE8, Firefox, Opera, Safari and Chrome:

Code:

<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	list-style: upper-alpha;
	list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>

andypandyrox456 · April 4th, 2010, 07:12 PM

Quote:

Originally Posted by PeterPeiGuo

The following works for IE8, Firefox, Opera, Safari and Chrome:

Code:

<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	list-style: upper-alpha;
	list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>

Ok I have IE. I'll try that.