.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

Rounded Corners on Web Parts

Posted By:      Posted Date: September 24, 2010    Points: 0   Category :SharePoint

Hi all

I am having some trouble adding rounded corners to my web parts.

I can add rounded corners to three of the corners on the web part chrome by editing the following CSS:

/* Top Left Corner */

.ms-WPHeaderTd {

	background: #04a204 url('/images/tl.gif') no-repeat left top;


/* Top Right Corner */

.ms-WPHeaderTdMenu {

	background: #04a204 url('/images/tr.gif') no-repeat right top;


/* Bottom Left Corner */

.s4-wpcell-plain {

	background: #04a204 url('/images/bl.gif') no-repeat left bottom;


It is the bottom that I am having problems with, I cannot find a way of adding an image to the bottom right corner. CSS3 would be able to do this, but support is thin and SharePoint 2010 doesn't seem to like it in IE9 anyway. I've also found very little online in relation to this problem.

Any help or suggestions would be greatly appreciated.

Many thanks


View Complete Post

More Related Resource Links

Image or ImageButton rounded corners


Hiiiii Coders,

I just want to make corners of my asp.net image or imagebutton rounded. How can i do so?  

Having problem with drawing rounded corners with borders using RoundedCornersExtender control

Hi, I have created panel using below syntax <asp:Panel style="z-index:4;top:270px;left:270px;width:320px;height:200px;position:absolute;"  Enabled="True" CssClass="Panel" TabIndex="4" Visible="True" runat="server" ToolTip="" BackColor="" BorderStyle="NotSet" BorderWidth="0px">  <div style="clear:both"></div></asp:Panel> and added rounded corner extened control using <cc1:RoundedCornersExtender Corners="All" runat="server" TargetControlID="panel4" BorderColor="Black" Enabled="True" Radius="10"></cc1:RoundedCornersExtender>Issue: At run time   there is  a gap between border and corners. I am using doctype of this" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >"If i changed the doc type to below "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" >" its working fine.Is there any solution for this with out changing the doc type?Advanced thanks for your help.Thanks,Charles  

Cannot develop the rounded corners for panel

Hello All, I m trying develop rounded corners for panel. I have gone through this post and did exactly as below:.modalPopup { background-color:transparent; padding:1em 6px; } .modalPopup2 { background-color:#ffffdd; width:270px; vertical-align :top; } .modalBackground { background-color:gray; filter:alpha(opacity=70); opacity:0.7; } Here is the aspx code: <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="ScriptmanagerTest"></asp:ScriptManager> <div> <asp:LinkButton ID="lnkButton" runat="server">Show Modal popup</asp:LinkButton> <br /> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;"> <asp:Panel ID="Panel2" runat="server" Width="334px" CssClass="modalPopup2"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> <asp:Button ID="btnOK" runat="s

Loading UserControl doesnot render panel properly with rounded corners

Hello folks,I am doing the following steps of code to load a childusercontrol into a parent and load it as a popup.Please help me correct my code below as I am not able to get the rounded corners.Below is my aspx page:<%@ Register Src="~/MessageUC.ascx" TagName="MessageUC" TagPrefix="Ctrl" %> <head runat="server"> <title></title> <link href="Styles/PopUp.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <Ctrl:MessageUC ID="MsgModal" runat="server" /> <asp:Button ID="btnFireOkMessage" runat="server" Text="Show" Height="44px" Width="225px" /> </form> </body> And here is aspx.vbProtected Sub btnFireOkMessage_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnFireOkMessage.Click Dim str As String = "Header" Dim strBody As String = "Body" MsgModal.Show(TestModalPopup.MessageUC.MessageType.Success, str, strBody, 200, 500) End Sub MessageUC.ascx<asp:LinkButton ID="LinkButtonTargetCon

How to make borders of a report item as rounded corners in rdlc?


Am designing a report using rdlc with report items such as rectangles and lists. I want to make those borders as rounded/blunted corners.....

Is there any possibilities to make it possible?



Thanks in advance.

Put a picture into a Graphic-object with rounded corners


Hi all

I foung an interesting code for drawing a rectangle with rounded corners on a windows form.


Now I would like to "fill" the graphic with a picture. (A .jpg-image)

Let's say I would like to display:



Dim myImage As

Rounded Corners with Gradient Background?


I'm trying to combine rounded corners (using Ajax Control Toolkit) and a gradient background (using CSS) but I'm not having much luck combining the two.  Any help would be appreciated.  Thanks,

Here's my code:

    color: #fff;
    margin: 0; 
    border: 0; 
    padding: 0;
    width: 50px; 
    text-align: center;
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, left bottom, from(#969696), to(#000000)); 
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(top, #969696, #000000); 
    /* For Internet Explorer 5.5 - 7 */ 
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); */ 
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#969696, endColorstr=#000000)";


                <cc1:RoundedCornersExtender ID="rc1" runat="server" TargetControlID="rounded" Corners="Top">
                <div id="rounded" runat="server" style="background-color: #000000; margin: 0; border: 0;
                    padding: 0;">

Displaying SharePoint lists in Web Parts

When you create a built-in or custom list in Microsoft Windows SharePoint Services, Windows SharePoint Services creates a Web Part, a basic building block of a SharePoint site, to display that list. These Web Parts are called List View Web Parts. Windows SharePoint Services stores List View Web Parts in the site collection Web Part gallery. (The site collection Web Part gallery is the most central gallery of Web Parts for a work group. By default, the gallery name is the name of the site, such as "Our Team Site Web Part Gallery." )

Six easy ways to customize your site using Web Parts in SharePoint

Becoming familiar with Web Part customization techniques gives you a range of page-customization choices. For example, you can customize your site's home page so that it displays the specific information that your team needs. You can rearrange the list items on the home page, add lists, and even change the images on the home page. As you become more familiar with Web Part Page customization techniques, you can build interactive Web Part Pages that makes the data in lists more dynamic and useful, and you can add new Web Parts that provide access to external data and Web services.

SharePoint Tutorial - Web Parts

A page in SharePoint is comprised of web parts the exist within zones. Web parts are available for just about everything. For example in the page below there are four web part highlighted by different colors. The purple web part displays a short list of the new announcements stored in the annoucements library. The pink web part displays events from a calendar within the site. The green web part displays an image from a location the user specifies. The gray web part displays a list of links from the links list on the site.

Visual Studio Add-In for Web Parts Generation

This article will introduce you to a new Visual Studio 2005/2008 add-in that can be used for Web Parts generation based on a prepared ASCX control/template. The add-in should allow Web Part developers to easily make Web Parts using the Visual Studio HTML designer. It should save you a lot of time and make Web Part development an enjoying experience even for beginners.

This article is written in the form of a step-by-step tutorial. It will give beginners a chance to successfully make, deploy, and try their first Web Parts, and will save some time for advanced users as you can always run into challenges when working with SharePoint.

Sandboxed Solutions for Web Parts in SharePoint 2010

SharePoint 2010 provides a new sandboxed environment that enables you to run user solutions without affecting the rest of the SharePoint farm. This environment means that users can upload their own custom solutions without requiring intervention from administrators, and without putting the rest of the farm at risk.

Writing Custom Web Parts for SharePoint 2007

As I mentioned in an earlier blog post, SharePoint 2007 is built on top of ASP.NET 2.0, which means you can now use ASP.NET 2.0 features (Forms Authentication, Master Pages, Membership, Site Navigation, New Data Controls, etc) when building SharePoint sites. This is true for both the new Windows SharePoint Services 3.0 version (which will be a free download) as well as Microsoft Office SharePoint Server 2007 (which costs money).

Checklist for Creating SharePoint Web Parts

Use this checklist to assist with the deployment and maintenance of Microsoft SharePoint Products and Technologies Web Parts.

Viewing Reports with SharePoint 2.0 Web Parts

Reporting Services provides several Web Parts that work with specific versions of a report server and in particular deployment modes. If you want to access report server content on a SharePoint site from a native mode report server, use the SharePoint 2.0 Web Parts that are included with Reporting Services. Instructions for installing and using the 2.0 Web Parts are provided in this topic.

reference from menubuttons to text parts in article on the same page


Hi, I'm searching now for hours but couldn't find it.Cry

In my menu i have several buttons which (by a <a href..) should go the a part of an article that is in the same form.

Menu button : What is a database should go to the page default.aspx and in there is an article published.
A part of this article is having a piece of text about "what is a database"

Menu button: how to make a query should go to this same article in the same page but then to the part that is have the piece about the query. The next could be an example of what i'm doing:

    <li><a href="default.aspx ?????>what is a database</a></li>
    <li><a href="default.aspx ?????>what is a query</a></li>

Where my question marks are, there should be a connection to that particular piece of text.
In each article part there is an ID="text1" and the second part id="text2"

How shoudl i do that, Should i use a question mark.
Please give me some guidance how to structure the <li> statement or a pointer where I can read about it.


RIA: Light Up SharePoint With Silverlight 2 Web Parts


Find out how to integrate SharePoint and Silverlight by creating a Silverlight media player and deploying it as a SharePoint Web Part.

Steve Fox and Paul Stubbs

MSDN Magazine November 2008

ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend