How to create a border around text in html

Written by brandy alexander
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to create a border around text in html
A border helps call attention to important text. (grand canyon strat border image by Neelrad from

As you work with Hypertext Markup Language (HTML), learn how to perform certain tasks, such as creating a border around text, so that you have even more control over the display of your page. Cascading Style Sheets (CSS) works with HTML to create an outline around your content. This way, you have the option to highlight key data so that your visitors do not miss it. Using the text editor that comes with your computer, practice creating borders around your HTML content.

Skill level:

Other People Are Reading


  1. 1

    Launch your computer's text editor and begin a new document.

  2. 2

    Type in the HTML code that creates a Web page:



    <title>Enter a name for your Web page here</title>





  3. 3

    Enter the text of your Web page between the "<body></body>" tags.

  4. 4

    Type in "<div></div>" tags before and after your content. Additionally, enter "style=" in the opening "<div>" tag to prepare it for the inline CSS rule that creates the border. For example:


    <div style="">

    This is the text that has a border around it.



  5. 5

    Enter the "width" and "height" designators that specify the measurements of the border. Type a number value in pixels (px) after the "width" and "height" as follows:

    <div style="width: 150px; height: 150px;">

    This is the text that has a border around it.


  6. 6

    Type in a "border" attribute to assign the look of the border line. Enter a value in pixels to specify the width and type in the name of a colour. Further, enter a characteristic, such as "solid" or "dotted," to specify how the line appears. To illustrate:

    <div style="width: 150px; height: 150px; border: 3px solid red;">

    This is the text that has a border around it.


  7. 7

    Save your file with an "HTM" or "HTML" file ending (extension). Launch your Web browser and select the "Open" or "Open File" option under the "File" menu to open your document and view the border around your text.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.