Rounded Corners

  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Radio

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    Heisenberg submitted a new resource:

    - Rounded Corners

    Rounded Corners

    Add to css_additional.css

    Code:
    /* Start rounded corners */
    .canvas-widget.default-widget, .search-widget, .blogsidebar-widget {
    -moz-border-radius-topleft:10px !important;
    -moz-border-radius-topright:10px !important;
    -webkit-border-top-left-radius:10px !important;
    -webkit-border-top-right-radius:10px !important;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    -moz-border-radius-bottomleft:10px !important;...

     
    Last edited:

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    You don't need vendor prefixes for border-radius these days. And actually, the modules have rounded corners by default, they are just using 3px so it's not that obvious. You also don't need !important.

    The previous code can be simplified as:

    Code:
    .canvas-layout-container .canvas-widget {
        border-radius:10px;
    }
    .canvas-layout-container .widget-header {
        border-radius: 10px 10px 0 0;
    }