How to create a colored border around text using HTML and CSS

Updated 11/13/2018 from

A frame in your HTML pages is used to draw attention to a section of text or to surround any other HTML element.

As shown below, HTML and CSS can be used to create a border around any text on your web page. In the example below, we included a paragraph (

) with a red border.

First example with text outlined in red.
This example also has multiple lines.

To create the example above, the following code was used.

First example with text outlined in red.
This example also has several lines.

In the code above, the style defines the size of the border (px abbreviated to pixels), the type of style and the color of the border. The border style specifies how the border is displayed on the screen. Other types of border styles are: Dotted, Dotted, Double, Groove, Ridge, Overlay, and Start. The border color defines the color you want to use for the border. In the example above, the color code #FF0000 was used, which is the color code for red.

Set the styling with CSS

The appearance of website elements can also be defined using inline CSS. Inline CSS is defined in your HTML document, in which

Element. You can also define the CSS in an external file with the element .css Renewal. Then you can link to that file from any HTML document, and elements in that document have access to CSS styles. For example, the following CSS code creates a new class called “borderexample” that can be applied to any other HTML tag.

  How to create a pattern in Photoshop to fill it

If you want to apply this border style to an HTML paragraph using the code above, you can type something similar to the example below.

Here is an example of a frame made with CSS