Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #8130

    hi there,

    how can i give the pictures in the portefoltio section a border with round corners?

    all my best



    You could add css3 border corners. Use following code and adjust the radius value as required:

    #top .slideshow {

    border-radius: 4px;



    thanks this is working good.

    i’d like to add some borders around the images and was thinking of

    #top .slideshow {
    border: 2px solid black;

    it appears on left, up and down but not at the right side of the images.

    how do i get this fixed?




    can you post a link please? I’ll investigate the portfolio with firebug.


    okay i created you an admin account and sent it to your email.

    the site since it’s designed as intern and you need a login to see the content.

    you can also checkout the logo problem.

    best regards



    any news about the right border?



    I think this requires a thumbnail size adjustment (depending on the border size) because the border pushes the image towards the right. Maybe try to change the size of the thumbnails based on the border width (current image width/height – 2x border width).


    hey dude i tried to set the width of the image and regenerate the thumbnails a couple of times.

    this doesn’t solve the problem.

    i found out that each portfolio grid image has a background and you have to limitate the width of it.

    #top .slideshow {
    background: #ffffff;
    width: 239px;
    border: 2px solid #11479F;
    border-radius: 25px;

    did the trick for me this time.

    there is only one annyoing thing. whenever you klick at the title of a portfolio item there single item feature image is going to be limited too.

    how can you keep the settings only for small portfolio images?

    i didn’t find a class or something…


    okay here is the solution if you only want to give a border to the small images of the portfolio.

    it works if you add a class to the portfolio items.

    to do so go to the loop-portfolio.php and replace the line

    <div class='post-entry one_third all_sort <?php echo $sort_classes.$extraClass; ?>'>


    <div class='portfolio-image post-entry one_third all_sort <?php echo $sort_classes.$extraClass; ?>'>

    now enter this in the custom css section of the broadscope theme:

    #top .portfolio-image .slideshow {
    background: #ffffff;
    width:239px; /* width of small portfolio images - 2 x width of the border */
    border: 2px solid #35496C;
    border-radius: 25px;

    now you have a border around the portfolio items but when you click on them the huge feature image is still not touched.

    problem solved!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘portfolio item image border with round corners’ is closed to new replies.