I've added a border around this portion of my post to isolate this content from my other contents.
It does look good too, and it is extremely simply to add!
Step 1:
Create a new post. Head over to Edit HTML mode and paste the following lines:
Create a new post. Head over to Edit HTML mode and paste the following lines:
<div style="border: 1px solid red; padding: 10px;">
Add your content here.
</div>
Step 2:
Go to Compose Mode and you will have your border there. Just add your content in it. Alternatively, you can compose your content first, then switch to Edit HTML mode and add the opening <div> and closing </div> tags above and below the content that you want to add the border to.
Go to Compose Mode and you will have your border there. Just add your content in it. Alternatively, you can compose your content first, then switch to Edit HTML mode and add the opening <div> and closing </div> tags above and below the content that you want to add the border to.
Border Cusomization:
There are three properties defined for the border and an extra property for padding in the example that I have used in this tutorial.
You can customize these properties to create a border that suits your need.
Have fun!
There are three properties defined for the border and an extra property for padding in the example that I have used in this tutorial.
<div style="border: 1px solid red; padding: 10px;">
You can customize these properties to create a border that suits your need.
Color | In the example above, I used 'red' as my border color. You can use other colors (eg: white, red, black) or you can even define a hex code if you want a specific color. For example:<div style="border: 1px solid #ffffff; padding: 10px;">This website allows you to generate hex code based on the color that you choose. |
Width | I used 1px as my width for my border. You can use other values to adjust the size of your border. |
Style | The most commonly used style is 'Solid'. However, you can use other styles like: dotted, dashed, double, groove, ridge, inset and outset. For example:<div style="border: 1px groove red; padding: 10px;"> |
Padding | In my opinion, padding is necessary to prevent your contents from kissing the border line. Try changing the padding from 10px to 0 and see what happens. |
Have fun!