BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan Right Header

HOME BZU Mail Box Online Games Radio and TV Cricket All Albums
Go Back   BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan > Welcome to all the Students > Tutorial > How to ?


Reply
 
Thread Tools Search this Thread Rate Thread Display Modes
  #1  
Old 23-07-2011, 05:43 AM
.BZU.'s Avatar


 
Join Date: Sep 2007
Location: near Govt College of Science Multan Pakistan
Posts: 9,693
Contact Number: Removed
Program / Discipline: BSIT
Class Roll Number: 07-15
.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute
Cool How to Style fieldset colors with rounded corners using CSS

The default display for a fieldset is a square cornered border. In certain browsers (Firefox and Safari and perhaps others) you can use CSS to make rounded corners on the border around the fieldset and around the legend.
Look at this simple form:
HTML Code:
<form id="example" name="example" method="post" action="send.php">
<fieldset>
<legend>A Fieldset</legend>
<label for="ex1">A text field</label>
<input type="text" name="ex1" id="ex1" />
</fieldset>
</form>
Here’s how that looks in Safari, with no CSS styling.
Name:  unstyled1.jpg
Views: 729
Size:  5.7 KB
I applied these rules to the fieldset selector in the CSS
HTML Code:
fieldset {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
Again in Safari, here’s what you see now.
Name:  styledfieldset.jpg
Views: 718
Size:  5.9 KB
The property used to create rounded corners is the border property. The rule is repeated three times, a redundancy meant to create the effect in as many browsers as possible. The border-radius rule is CSS3, not yet in standard adoption by all browsers. The webkit-border-radius rule is understood by all webkit browsers such as Safari. The moz-border-radius is understood by all mozilla based browsers such as Firefox.
A border can be added to the legend as well. That element can also display the rounded borders. Here’s the CSS.
HTML Code:
legend {
border: solid 1px black;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
This is how it displays in Safari.
Name:  styledfieldset2.jpg
Views: 693
Size:  7.0 KB
A couple of changes to show how the legend’s appearance might be improved can be made in the CSS.
HTML Code:
legend {
background: #FF9;
border: solid 1px black;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding: 6px;
}
Now the legend displays like this.
Name:  styledfieldset3.jpg
Views: 705
Size:  6.7 KB
__________________
(¯`v´¯)
`*.¸.*`

¸.*´¸.*´¨) ¸.*´¨)
(¸.*´ (¸.
Bzu Forum

Don't cry because it's over, smile because it happened
Reply With Quote
Reply

Tags
colors, corners, css, fieldset, rounded, style


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Program to change the background colors on the screen bonfire Object Oriented Programming 0 01-03-2011 03:00 PM
Friends are like colors irfishahpk Quotes 0 23-08-2009 06:24 PM
BIrthday COLORs usman_latif_ch Chit Chat 0 14-03-2009 02:04 PM
Compositions from the Colors usman_latif_ch BZU Graphics and Wallpapers 0 06-03-2009 09:24 AM

Best view in Firefox
Almuslimeen.info | BZU Multan | Dedicated server hosting
Note: All trademarks and copyrights held by respective owners. We will take action against any copyright violation if it is proved to us.

All times are GMT +5. The time now is 04:25 AM.
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.