Borders Grey and Curved
The working code:
Curved corners make a more interesting container for your content.
Try changing the images and this CSS code will position them for you in most browsers!
Tested browsers include: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Give us your feedback on browsers which do not display this code correctly.
...................
This container uses exactly the same attributes as the other containers.
This container uses exactly the same attributes as the other containers.
This container uses exactly the same attributes as the other boxes. As you can see in this example, it is imperative that CSS containers can expand and collapse to incorporate different volumes of content.
Author: Free CSS Menus: www.freecssmenus.co.uk
Description: Creating curved corners for your containers can be a tricky business, espacially when you want them to expand and collapse for different volumes of content. This code does the job, the only problem is the top right and top left images can become overlapped when the container is at its smallest.
Category: Borders
Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Comments:
No comments have been submitted for this script!
Would you like to read comments on other CSS scripts?
More CSS related to this script:
Icon Yellow Rollover Button. Some visitors to your websites may have poor vision or disabilities which prohibits them from clicking on small buttons easily. This problem is easily remedied with very little css code and minimal effort... and it looks better than your boring old hypertext. Don`t forget that even though scripts like this use images, they are still just hypertext!
Orange CSS Rollover Button. This orange css button has been refined to contain only one image. Other rollover buttons of this nature would normally contain two images. Here we use the: background-postion command to display the image in four different positions. Why four? Well the normal state (no hover)has both left and right edges which are needed so that the button can stretch with more text. Apon the hover state the button uses another two edges.
Borders Grey and Curved. Creating curved corners for your containers can be a tricky business, espacially when you want them to expand and collapse for different volumes of content. This code does the job, the only problem is the top right and top left images can become overlapped when the container is at its smallest.
Dark Flash Metal Menu. You may be mistaken for thinking that this menu was created using flash. CSS, basic xhtml and a single image were the only ingredients used to build this accessible horizontal menu. This and all CSS examples on this site, adhere to strict W3C compliancy.
Yellow CSS Drop Down Menu. This basic css drop down menu will de-clutter all your navigation links into one simple menu. Using the z-index command allows the horizontal menu to safely dropdown over the top of the rest of the webpage without distorting or moving any content. Try using a background image instead of a colour to really bring the menu to life.
Latest CSS:
•
Bright Yellow Vertical Menu
If your website is bright and sunny then add this vertical menu to give it a spl ...
Added: Tuesday 15 Jun, 2010
•
Transparent Vertical Menu
This vertical golf menu uses a simple PNG image to give some transparency so tha ...
Added: Saturday 17 Apr, 2010
•
css3 Border Radius
CSS Border radius achievable with CSS3.
I do love the idea of creating corner ...
Added: Tuesday 06 Apr, 2010
•
Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010
•
CSS vertical numeric keypad
Stylish CSS vertical numeric keypad. ...
Added: Sunday 03 Jan, 2010
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
Green blue rating
Ever wondered how to replicate ...
4.2 / 5 - 18 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 10 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.4 / 5 - 9 Ratings
Image Rollover Solar S ...
This example of css uses one m ...
4.9 / 5 - 7 Ratings
CSS Tags:
Design Script Border-radius Animation Menu Alignment Sliding Doors Text-decoration Tabbed Style Rating Tutorials Cascading Orange Font Photo Gallery Style Sheets Icon Gold Texture Centering Background Navigation Opacity Green Website Template Block Dark Rounded Colour Color Metal Horizontal Width Border Forms Flash 3d Watermark Png Positioning Cyan Float Css Solar System Pink Yellow Corner Image Hypertext Button Red Z-index List Expandable Templates Transparency Vertical Url Blog Text Hover Blue Css3 Rollover Css Purple Chrome Display Light Menu Drop Down Grey Depth
