Create a colored border around text with HTML and CSS
A border in your HTML pages can help bring attention to a section of text or surround any other HTML element.
As can be seen below a border can be created around any text using HTML and CSS on your web page. In the example below we have surrounded a paragraph < p > < /p > with a red border.
To create the above example the below code was used.
In the above code, the style is defining the border size (px short for pixel), style type, and border color. The style of the border is how the border appears on screen. Other types of border styles include dotted, dashed, double, groove, ridge, inset, and outset. The border color defines the color you want to use for the border. In the above example, the color code #FF0000 was used, which is the color code for red.
The style of how something appears on a web page can also be done with CSS code placed into the < head > < /head > section of your HTML page or in an external CSS file so it affects all pages using the CSS file. For example, with the below CSS code a new class called "borderexample" is being created that can be applied to any other HTML tag.
Using the above code if you wanted to apply this border style to an HTML paragraph you could type something similar to the example below.
computerhope.com
A border in your HTML pages can help bring attention to a section of text or surround any other HTML element.
As can be seen below a border can be created around any text using HTML and CSS on your web page. In the example below we have surrounded a paragraph < p > < /p > with a red border.
First example with text surrounded by a red border.
This example also has multiple lines.
To create the above example the below code was used.
- Code:
<p style="border:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.<br>This example also has multiple lines.</p>
In the above code, the style is defining the border size (px short for pixel), style type, and border color. The style of the border is how the border appears on screen. Other types of border styles include dotted, dashed, double, groove, ridge, inset, and outset. The border color defines the color you want to use for the border. In the above example, the color code #FF0000 was used, which is the color code for red.
Defining style using CSS
The style of how something appears on a web page can also be done with CSS code placed into the < head > < /head > section of your HTML page or in an external CSS file so it affects all pages using the CSS file. For example, with the below CSS code a new class called "borderexample" is being created that can be applied to any other HTML tag.
- Code:
<style>
.borderexample
{
border-style:solid;
border-color:#287EC7;
}
</style>
Using the above code if you wanted to apply this border style to an HTML paragraph you could type something similar to the example below.
- Code:
[size=13]<p class="borderexample">This is an example of a border created using CSS</p>[/size]
Additional information
- Additional help and information on HTML tables.
- See our border definition for additional information related pages.
computerhope.com