Similarly, other border stylesīesides "solid" are also possible. The thickness of the border can be changed if you find a 1 pixel border too thin for your liking. Most of the code examples on (at the time I write this). I use the exact same code, " border: 1px solid green", to enclose Of a box using this code can be seen above. The CSS code above specifies a 1 pixel border for the class "boxed". For this tutorial, I shall use a DIV block to enclose the text/pictures. Let's say that you have some text or pictures that you want to enclose in a box.Ĭreate the HTML for the block.
Using CSS to Draw a Border Around Your Block of Text and Pictures Creating a website is more than just designing the visual appearance. It will take you through all the necessary steps of making your own site.
HOW TO ADD BORDER TO TEXT IN HTML HOW TO
If you have arrived at this page with the intention of learning more about how to create your own website, you should read my article on You do not have to be an expert, but you will need some working knowledge of This article is targeted at those who hand code directly in HTML and CSS.Īs such, some basic CSS/HTML knowledge is assumed.
This tutorial shows you how you can accomplish this using CSS. The box serves to separate the content from the rest of the page, and may be usedĮither to emphasize its content, or to make it like an inset in your page. This has the visual effect of placing your text and pictures in a rectangular box. How to Create a Rectangular Box to Contain Your Text/Pictures with CSSīeing able to draw a line around a block of text and/or pictures is handy if you want to group a section of related items together.