Home / CSS / Chapter 13 : CSS Borders

Chapter 13 : CSS Borders

Posted by Muhammad Shiraz Kamboh Sunday 27 May 2012 0 comments
Inherited: No

Border

You can set the color, style and width of the borders around an element in one declaration by using the border property.
border: 1px solid #333333;


Values:
  • color
  • style
  • width
Or you can set each property individually

Border Color

You can set the color of a border independently with the border-color property.
border-color: value;
Values:
  • color name
  • hexadecimal number
  • RGB color code
  • transparent

Border Style

You can set the style of a border independently with the border-style property.
border-style: value;
Values:
  • dashed
  • dotted
  • double
  • groove
  • hidden
  • inset
  • none
  • outset
  • ridge
  • solid

Border Width

You can set the width of a border independently with the border-width property.
border-width: value;
Values:
  • Length
  • Thin
  • Medium
  • Thick
Or you can set the elements for each borders side individually

Border Bottom

You can set the color, style and width of the bottom border around an element in one declaration with the border-bottomproperty.
border-bottom: 1px solid #333333;
Values:
  • color
  • style
  • width
Or you can set each value individually
Border Bottom Color
You can set the color of the bottom border around an element with the border-bottom-color property.
border-bottom-color: value;
Border Bottom Style
You can set the style of the bottom border around an element with the border-bottom-style property.
border-bottom-style: value;
Border Bottom Width
You can set the width of the bottom border around an element with the border-bottom-width property.
border-bottom-width: value;

Border Left

You can set the color, style and width of the left border around an element with the border-left property.
border-left: 1px solid #333333;
Values:
  • color
  • style
  • width
Or you can set each value individually
Border Left Color
You can set the color of the left border around an element with the border-left-color property.
border-left-color: value;
Border Left Style
You can set the style of the left border around an element with the border-left-style property.
border-left-style: value;
Border Left Width
You can set the width of the left border around an element with the border-left-width property.
border-left-width: value;

Border Right

You can set the color, style and width of the right border around an element in one declaration with the border-right property.
border-right: 1px solid #333333;
Values:
  • color
  • style
  • width
Or you can set each value individually
Border Right Color
You can set the color of the right border around an element with the border-right-color property.
border-right-color: value;
Border Right Style
You can set the style of the right border around an element with the border-right-style property.
border-right-style: value;
Border Right Width
You can set the width of the right border around an element with the border-right-width property.
border-right-width: value;

Border Top

You can set the color, style and width of the top border around an element in one declaration with the border-top property.
border-top: 1px solid #333333;
Values:
  • color
  • style
  • width
Or you can set each value individually
Border Top Color
You can set the color of the top border around an element with the border-top-color property.
border-top-color: value;
Border Top Style
You can set the style of the top border around an element with the border-top-style property.
border-top-style: value;
Border Top Width
You can set the width of the top border around an element with the border-top-width property.
border-top-width: value;
Categories:

If You Like This Post, Share it With Your Friends

Popular Posts

  • Facebook Funny Status
    Your Name: feels like getting some work done...and so he is sitting down until the feeling passes. Your Name: used to play sports. Then s...
  • HTML/XHTML Character Entities
    Here is a set of tables containing the 252 allowed entities in HTML 4 and XHTML 1.0, as described in section 24 of the official HTML 4 speci...
  • Sending emails in PHP & email injection attacks
    PHP’s inbuilt mail() function provides very limited mail functionality. Although its easy to send text emails, but thats pretty much the on...
  • How Give A Kid an evil Look
    A. Open the photo Two. Duplicate the original layer and call it "Eyes" (well, this is purely for convenience :) Three. Change the...
  • Create HTML Form in Seconds
    Create Online Simple awesome HTML Form with easy 3 Steps Click Here to  Create PHP, HTML Form
  • Smileys and Emoticons With Names
    A smiley is a sequence of characters on your computer keyboard. If you...
  • Chapter 16 : CSS Classification
    Inherited: No Clear You can control if an element allows floated elements to its sides with the  clear  property clear: value;
  • Text art and ascii Picture Online Generator
    Text art and ASCII Picture Online Generator Do you want to make nice ASCII art for your email signature/blog profile like this? +-+-+-+-+-...
  • Chapter 13 : CSS Borders
    Inherited: No Border You can set the color, style and width of the borders around an element in one declaration by using the  border  prope...
  • Mouse animation
    See this example and learn how to create cool animation using the mouse. To make this example, you also have to use action script code. Wh...

About Me

My photo
I create this Blog for learn the all kind of tutorial about web developing | HTML, Java, PHP, Graphic designing, Corel Draw, Photoshop, Micromedia Flash, Swish and many more related software and internet programming tutorials.

Followers

Blog Archive

Copyright © iCatch Web Tutorials. All rights reserved. designed by Muhammad Shiraz Kamboh