CSS Border Radius (border-radius)

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.

The border-radius property is used as follows:

Control top & Bottom Specific border radius

• border-top-left-radius: ;
• border-top-right-radius: ;
• border-bottom-left-radius: ;
• border-bottom-right-radius: ;

Same usage of code above
border-top-left-radius:0px; Change from 1-100px

Implementing the Script: The CSS 3 Code

<style>

#div-id-or-class-name-here{
-moz-border-radius:10px;
-border-radius:10px;
border-radius:10px;
background:#fa0;
}
/* This is the Hover Effect Changes 
the hover text-shadow to #999 - Provided by https://www.devsocial.net 
& WebMaster Ramon Sanchez */

 

#div-id-or-class-name-here:hover{
-moz-border-radius:15px;
-border-radius:15px;
border-radius:15px;

}
</style>

Rating:

Capable:

Date Posted: 2/5/2023

Note: Make sure your page contains a valid doctype for this menu to render properly.

Revision History: Nov 8th, 2023': updated code..

Usage Terms: | Please Read - -> >

Viewed: 79,346

Share our library with others. Spread the love. Share:

Was this article & Examples Helpful ?
If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us. Donate through PayPal.

More useful links:

• Css 3 Links & Css 3 Buttons
• Horizontal CSS Menus
• Vertical CSS Menus
• Advertising CPM/CPC Calculator