One of the missed styles in WordPress is the border. Sometimes you need to enclose a piece of information, table, a list, a column or any other block in a border to pop it up. What about adding fancy borders easily?
This tutorial will include:
- Briefly, How WordPress Works?
- Where to add the additional CSS ?
- Adding additional CSS to elements directly vs classes.
- The code that we will add for you to copy and paste directly.
- The different border styles available
Before the detailed steps, if you like, You can watch a step by step video below. For any clarification or comment fill the form to the side and we shall come back to you as soon as possible
First Things First, a quick introduction about WordPress
- WordPress is a Content Management System
- It is build using PHP and MySQL Database
- It delivers to the visitor of your web page or your blog post an HTML result of interpreting the PHP and DataBase
- Since the result is HTML, it needs some styling i.e. CSS (Cascaded Style Sheet)
- WordPress offers a predefined blocks to write your post or build your page as Paragraph, list and image blocks
- It offers a set of styles for each block
- It offers Advanced options for almost every block where you can add some CSS Classes
Where to add the additional CSS ?
- When You add any block, you can find some of its settings in the top tool bar and some others in the right side panel
- IF you don’t see the Block side settings panel, click the settings icon
- Make sure you select “Block” because Document is for general document settings as categories and tags
- Click on Advanced (Not available for Post Title)
- Write here the class that you added in the Appearance Customization window


- From the WordPress right side panel select Appearance , Then Select Customize.
I recommend you right click on Customize and ope it in a new Tap or Window - Near the end of the theme customization settings, there is the Additional CSS item, click on it
- It will open the Customization Additional CSS writing panel. It includes support prediction pop ups



Adding additional CSS to elements directly vs classes
- By Elements here we mean the basic HTML elements or WP blocks as Paragraphs, Lists, Images and so on
- When you add style to them directly in the Customizing Additional CSS as step 7 above, this will modify this element in all instances of this block in all your posts
- Copy the code to the right to the Appearance>Customize>Customizing Additional CSS Then click Publish
- 5px is the border width
- dashed is the style of the 4 sides of the border
- black is the color of the border
- Refresh your post view and you will find all paragraphs in any post surrounded by a dashed black border
p{
border: 5px dashed black;
}

Adding Classes and calling them with specific block
- This time in Appearance>Customize>Customizing Additional CSS we shall add the code to the right here->
- These are 2 classes with CSS (cascaded style sheet) code as it is having a dot ( . ) before the name
- After Publishing these Additional CSS classes by clicking publish on the top, Go to your post
- At the block you want to add the classes follow steps (1-4) –click here to return to it–
- Then Preview Your post, you will find that this specific paragraph had Yellow border while all other still keep the dashed black one
- You can remove the dashed borders bu deleting these lines from your Customization Additional CSS and Pubish

.border_1{
border: 5px solid yellow;
}
.padding_25px{
padding: 25px;
}

The different border styles available
- dotted – Defines a dotted border
- dashed – Defines a dashed border
- solid – Defines a solid border
- double – Defines a double border
- groove – Defines a 3D grooved border. The effect depends on the border-color value
- ridge – Defines a 3D ridged border. The effect depends on the border-color value
- inset – Defines a 3D inset border. The effect depends on the border-color value
- outset – Defines a 3D outset border. The effect depends on the border-color value
- none – Defines no border
- hidden – Defines a hidden border
Source is https://www.w3schools.com/css/css_border.asp
To use any of them just replace the style: Solid in the code to the side with the appropriate style from the list above, you can adjust color and width as your preference
.border_1{
border: 5px solid yellow;
}
Subscribe to our Photoshop Tutorial Blog to receive latest Tricks and Tutorials as they are released and to Join Discussions
Subscribe to our YouTube Channel
Click Here-> OneOfTheSimpleWays
If you have any Clarification about the steps in this tutorial or any other Photoshop clarifications leave us a note below