Saturday, February 18, 2012

Create stylish box using CSS


Create stylish Rounded corner box using CSS






Step 1) Download below images and put it in your solution of visual studio.
 
 

Step 2)  Add below code in your ASP.Net page

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="csstest.aspx.cs" Inherits="csstest" %>

<!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" >
<head runat="server">
    <title>Untitled Page</title>
   <style type="text/css">
  
   .bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
   .br {background: url(br.gif) 100% 100% no-repeat}
   .tl {background: url(tl.gif) 0 0 no-repeat}
   .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
   .clear {font-size: 1px; height: 1px}
     
   </style>

   
  
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    <div class="bl"><div class="br"><div class="tl"><div class="tr">
   This is the stylish box created by CSS.
   Created by sourav kayal.
</div></div></div></div>
<div class="clear">&nbsp;</div>
   
    </div>
    </form>
</body>
</html>


1 comment:

  1. Great ! You helped me, to stylish my widget box. Thanks

    ReplyDelete