css3 Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

Different Border Styles:

The border-style property specifies what kind of border to display.
The following values are allowed:
  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).


<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Output:

The border-style Property

This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A mixed border.



Border - Individual Sides:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

Borders in css3:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

<p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p>

</body>
</html>


Output:

The border-radius Property

This property is used to add rounded borders to an element:
Normal border
Round border
Rounder border
Roundest border
Note: The "border-radius" property is not supported in IE8 and earlier versions.

Comments

Post a Comment

Popular posts from this blog

Introduction to CSS

What is CSS? CSS  stands for  C ascading  S tyle  S heets CSS describes  how HTML elements are to be displayed on screen, paper, or in other media CSS  saves a lot of work . It can control the layout of multiple web pages all at once External stylesheets are stored in  CSS files. Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to  describe the content  of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a ...
Read more

Background repeat and no-repeat in css

Background repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("gradient_bg.png");   background-repeat: repeat-x; // we can give repeat-y for aligning in y axis } </style> </head> <body> <h1>Hello World!</h1> <p>Here, a background image is repeated only horizontally!</p> </body> </html> No Repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html>
Read more