Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger CSS » Blogger Tutorial » How-to » How to Add Border around an image in blogger posts

How to Add Border around an image in blogger posts

Are you looking to add border in your blogger post's images? Then you are at right place, as this article will explain about the same that how you can add border around an images in your blogger posts using CSS. This will take just 5 minutes to done as it is too simple and easy. Just follow the easy steps given below to add border to your blogger posts images.

Go to blogger dashboard> Template> Edit HTML
Press CTRL + F to enable search box, and search for b:skin>> tag.
After finding the skin tag, just above it paste the following code:

    
.post img {
border:5px solid #d2d2d2;
padding:2px;
}

-- You can change color of the border by changing #d2d2d2 with any other alter hex color.
-- If you want to increase the blank space of your border just increase higher number with 2px in above code.

You can also use different types of borders in your images, following are some border types that you can use in above code.

  1. solid: Defines a solid border
  2. dotted: Defines a dotted border
  3. dashed: Defines a dashed border
  4. double: Defines two borders. The width of the two borders are the same as the border-width value
  5. groove: Defines a 3D grooved border. The effect depends on the border-color value
  6. ridge: Defines a 3D ridged border. The effect depends on the border-color value
  7. inset: Defines a 3D inset border. The effect depends on the border-color value
  8. outset: Defines a 3D outset border. The effect depends on the border-color value

Once you are done with the customization, Click "Save Template" and you're done!

Let me know if you have any questions by commenting below. 
Add Comment
Blogger CSS Blogger Tutorial How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • Add Auto Read More with Thumbnail to Blogger/Blogspot
    Add Auto Read More with Thumbnail to Blogger/Blogspot
  • Optimising images for search engines
    Optimising images for search engines
  • 6 Simple Ways Students Can Make Money Online
    6 Simple Ways Students Can Make Money Online
  • Related Posts Widget Without Thumbnails for Blogspot Blog
    Related Posts Widget Without Thumbnails for Blogspot Blog
  • What is Responsive Design and how can it Benefit Your Site
    What is Responsive Design and how can it Benefit Your Site
  • Responsive Timeline With Pure CSS/CSS3 3D Effect for Blogger
    Responsive Timeline With Pure CSS/CSS3 3D Effect for Blogger
  • Things to do when creating a Blog
    Things to do when creating a Blog
  • How to Add Official Contact Form to a Specific Page in Blogger / Blogspot
    How to Add Official Contact Form to a Specific Page in Blogger / Blogspot
  • How to Add Google AdSense Below Post Title in Blogger
    How to Add Google AdSense Below Post Title in Blogger
  • How to generate sales with a high converting landing page
    How to generate sales with a high converting landing page

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ▼  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ▼  July (1)
      • How to Add Border around an image in blogger posts
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ►  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates