Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #18298

    How can we round the corners of widgets which are set on sidebar? For example look at my page and see the twitter widget.



    You’re twitter widget are being cut off. Did you change anything on the styling? Try to add this at the very end of you style.css

    .sidebar .box {
    overflow: visible!important;




    Hi Ismael,

    If you opn my site by using IE it seems regular, but if you use chrome or mozilla it seems as it has ben cut off. I did not cahange anything. And to where must I add the cod you gave above? I am using skin4, so must I add the codes to style4.css or to style.css on wp admin panel (editor)? Which one? Also I want th corners of my twitter widget rounded.


    Hi sulker,

    You can add it at the very end of your style.css. I have checked your site and I think you have it fixed. :) I think the border is not looking good on your sidebar, if you want to remove it, just at it at the end of style.css:

    .sidebar {
    border-left: 0 !important;

    Hope this helps. :)




    Hi Ismael,

    Here you can see my twitter widget on which I opened my site by using Chrome:

    And here you can see my twitte widget on which I opened my site by using IE9:

    You can see the corner difference. I want corners rounded as in Chrome. Is the answer you gave above solution of my poblem?

    Alson I want to clean the short black line und twitter widget, not the all of border.

    And I tried your advice but it doesn’t work. Nothing is changed.


    Hi sulker,

    The issue with Newscast is that in order for it to work in IE it uses:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Inside the header.php file. This means that IE interprets the pages code as if it were IE7 and so it isn’t able to make use of border-radius in css. You’ll need to open up the header.php and change that to:

    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    However, I don’t know what negative impact will have on the rest of the layout since as this is what Kriesi used originally to support IE properly and changing the code may cause other issues.

    To get rid of the border, you can remove the border-left from this line in your style4.css line 206:

    .sidebar {
    border-left: 1px solid #333;

    However, it removes the border for both of the sidebars because they aren’t named individually. As far as I know there isn’t a way to remove the border from just one of the sidebars.




    Hi Devin,

    I’m so happy for it works. :) The first change you offer I mean. The corners are rounded now. But the second one is still another porblem: (Purchase code hidden if logged out) -on-the-right-sidebar

    As “Nick” says, “The problem is, the second sidebar generates inside the first sidebar when that widget is present”. He suggest not to use it but I want. Can you fix this problem?

    So thanks again…


    Closed and merged to (Purchase code hidden if logged out) -on-the-right-sidebar

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

The topic ‘How to round the corners of widgets placed on sidebars’ is closed to new replies.