Title: Adding image borders the correct way? Last modified: August 22, 2016 --- # Adding image borders the correct way? * [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/) * My site: [http://www.privateguitar.com](http://www.privateguitar.com) * I have read of multiple ways to add borders to images on wordpress. I tried adding a css style and it didn’t work. Which is the correct way to do this? * My developer made my front page with borders. I would like to add those same yellow borders to the rest of the images on my pages for a consistent look. * The page I would like to add yellow borders: [http://privateguitar.com/testimonials](http://privateguitar.com/testimonials) Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/page/2/?output_format=md) * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192853) * What CSS did not work for you? This is definitely a job for a CSS border. Your homepage images have the border actually built in to the image. * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192854) * Just looking quickly with developer tools, this seems to do the trick. * ``` .panel-grid-cell img { border: 1px solid #f1cd67; padding: 3px; } ``` * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192855) * Visual > Click on “Edit Image” > Image CSS Class > border-yellow * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192857) * If you add my CSS to your style.css or a custom CSS area within your theme, you will not have to add it manually to every image. * And you are doing that incorrectly, actually. CSS Class means something like img-yellow-border and then you still need to add the CSS to your stylesheet to target that class .img-yellow-border. You don’t actually add CSS there. * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192858) * I think style.css is turned off in my theme. I don’t mind manually adding them to each image. * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192859) * You can’t turn off your style.css. What theme are you using? * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192860) * This is my style.css coding: * /* Theme Name: U-Design Theme URI: [http://themeforest.net/item/udesign-wordpress-theme/253220?ref=internq7](http://themeforest.net/item/udesign-wordpress-theme/253220?ref=internq7) Description: A slick, powerful and clean theme U-Design provides an intuitive set of options to help you setup your WordPress site quickly and effectively. Flexibility is key and it has been optimized for SEO and speed. It is also responsive& mobile ready should you choose that option. The U-Design theme features include: unlimited colors, widgetized home page, over 500 fonts to choose from, WooCommerce Integration, it is also translation and multilingual ready, step by step documentation, exclusive U-Design support forum and a helpful community. Always up-to-date security and many new features are constantly added as the theme evolves. Author: Andon Author URI: [http://themeforest.net/user/internq7/portfolio?ref=internq7](http://themeforest.net/user/internq7/portfolio?ref=internq7) Version: 2.4.0 License: Located in ‘licensing’ folder License URI: Located in‘ licensing’ folder */ * /* Do not remove any of the commented text above as it is used by the theme for proper function! * All the themes’ CSS files are located under the ‘styles/’ sub-folder… * If you would like to use this file to add any custom CSS, you’ll need to enable it first from the theme’s “General Options” section. Please note: After enabling the use of this file, you will not see any change here, feel free to add your custom CSS below. On the other hand, if you need access to the theme’s main style sheet, you will need FTP client to access it, is it located in: “styles/style1/ css/style.css” */ * You need to make this file writable before you can save your changes. See the Codex for more information. * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192863) * Do you have FTP access? I would really recommend [Creating a Child Theme](http://codex.wordpress.org/Child_Themes) before making file changes so you can update your theme later without losing changes. * > If you would like to use this file to add any custom CSS, you’ll need to enable > it first > from the theme’s “General Options” section. Please note: After enabling > the use of this file, you will not see any change here, feel free to add your > custom CSS below. On the other hand, if you need access to the theme’s main > style sheet, you will need FTP client to access it, is it located in: “styles/ > style1/css/style.css” * It tells you the steps you can take to add your custom CSS, though. Then just add the code I gave you above as your custom CSS. Alternatively, if you already gave all of those images the CSS class of border-yellow like stated above, then this CSS will be better: * ``` .border-yellow { border: 1px solid #f1cd67; padding: 3px; } ``` * > You need to make this file writable before you can save your changes. See the > Codex for more information. * I am not sure why this is there because I’m not familiar with U-Design but I would assume that goes away when you enable it in your General Options area. * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192865) * Enabling the styles.css will not make any changes to my website? I am scared of irreversibly changing the site. * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192866) * Would I copy and paste this code in the styles.css anywhere or is there a specific area to paste it? * .border-yellow { border: 1px solid #f1cd67; padding: 3px; } * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192867) * Just be sure it is outside of `/* */`. You should really make a [Child Theme](http://codex.wordpress.org/Child_Themes) but I am assuming you do not have FTP access? * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192869) * Yes, I use WS_FTP Pro. * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192880) * Thanks you Craig for your pointers 🙂 * Thread Starter [privateguitar](https://wordpress.org/support/users/privateguitar/) * (@privateguitar) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192886) * One more question: Would adding a global style.css to the entire site add additional borders to the front page images? This may be too much for those images since they already have a yellow border. * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/#post-5192889) * If you are targeting your custom CSS class `.yellow-border`, then just ensure the front page images DON’T have that class and they won’t get the border. That goes for all images on your site. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/page/2/?output_format=md) The topic ‘Adding image borders the correct way?’ is closed to new replies. ## Tags * [Borders](https://wordpress.org/support/topic-tag/borders/) * [css styles](https://wordpress.org/support/topic-tag/css-styles/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 16 replies * 2 participants * Last reply from: [privateguitar](https://wordpress.org/support/users/privateguitar/) * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/adding-image-borders-the-correct-way/page/2/#post-5192926) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics