HOME BZU Mail Box Online Games Radio and TV Live Cricket Score 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,688
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:
<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: 550
Size:  5.7 KB
I applied these rules to the fieldset selector in the CSS
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: 571
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.
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: 524
Size:  7.0 KB
A couple of changes to show how the legend’s appearance might be improved can be made in the CSS.
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: 536
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 | Cloud Computing | 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 12:05 AM.

Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.