Blogger

HTML code to make border line around paragraph text

Written by Selvakumaran Krishnan April 24, 2017

HTML code to make border line around paragraph text

Copy the following style sheet code and you can paste it either right before your paragraph text which you want to display with borderline or in the CSS file.

Stylesheet code

.border {
border-style:solid;
border-color:#5DADE2;
border-width:5px;
padding:15px;
background-color:#ebf5fb;
}

Paragraph text code

<p class="border">
This is a sample paragraph text. You can make a border line around this paragraph and customize the border colour, border background, border type, padding and so on.
</p>

Sample Preview

This is a sample paragraph text. You can make a borderline around this paragraph and customize the border color, border background, border type, padding and so on.

Code properties and customization

“.border” – This is the class name of the style sheet and it defines the paragraph to be displayed as per the style properties specified under this class. It can be changed as you desire but, the same shall be mentioned in the page class tag “<p class=”
“border-style: solid;” – This line defines the type of borderline (i.e. solid). You can replace the “solid;” other style types such as “dotted;”, “dashed;”, “inset;”, “outset;”, “double;”. To make a mixed combination of any four styles, simply write like this “border-style: solid dotted dashed double;”
“border-width: 5px;” – This line sets the thickness of the border line. You can change the value “5px;” of your own.
“padding: 15px;” – It defines the space between the border line and text inside the border.
“border-color: #5DADE2;” and “background-color: #ebf5fb;” – As the name itself tells, they define the border and background colors which can be changed whatever the colors you like.

Hope the above explanation is sufficient enough to make any type of border lines around text or paragraphs yourself. Queries if any please feel free to comment below.