CSS Border || CSS

CSS

CSS full form is Cascading Style Sheets, specifically used to make html document attractive. CSS border is one of the property which make borders around your content in html file,it can image , text , Link and a video.

Width:

CSS Border width can be in pixels,ems or levels like medium,thin and thick.As every component in the html document as four sides(left, right,top,bottom) ,So we can alter the CSS Border for each side differently.

Example #1:

Medium:

p{
border-width:medium;
}

Medium Border

Thick:

p{
border-width:thick;
}

Think Border

Thin:

p{
border-width:thin;
}

Thin Border

Pixels:

p{
border-width:10px;
}

Pixels

Top,bottom,left,Right width:

p{
border-top-width:medium;
border-bottom-width: thin;
border-right-width: thick;
border-left-width: 15px; 
}

ABC

Style:

The border-style set a specific layout or design to our CSS Border.We can also apply different border-style at each side of your content.

Example #2:

<!DOCTYPE html>
<html>
<head>
<style>
.solid{
  border-style: solid;
  border-width: 5px;
}

.dotted{
  border-style: dotted;
  border-width: 5px;
}

.dashed{
  border-style: dashed;
  border-width: 5px;
}

.double {
  border-style:double;
  border-width: 5px;
}

.groove {
  border-style: groove;
  border-width: 5px;
}

.ridge {
  border-style: ridge;;
  border-width: 5px;
}

.inset {
  border-style: inset;
  border-width: 5px;
}

.outset {
  border-style: outset;
  border-width: 5px;
}
</style>
</head>
<body>
<p class="solid">Solid</p>
<p class="dotted">Dotted</p>
<p class="dashed">Dashed</p>
<p class="double">Double</p>
<p class="groove">Groove</p>
<p class="ridge">Ridge</p>
<p class="inset">Inset</p>
<p class="outset">Outset</p>
</body>
</html>

Output:

 

Solid

 

Dotted

 

Dashed

 

Double

 

Groove

 

Ridge

 

Inset

 

Outset

Radius:

The border-radius use to make the edges of html element border rounded by declared units. These units are in pixels,rem,em etc.

Example #3:

.radius {
    border-style: solid;
    border-radius:2px;
    border-color:green;
}
.radius1 {
    border-style: solid;
    border-radius:8px;
    border-color:brown;
}

Output:

A

 

B

Image:

The border-image is the property which set the image as the border of html element.It required the source or path of image in url().The border color must be transparent.

Example #4:

<style>
.image {
    border: 30px solid transparent;
    border-image:url(star.png);
}
</style>

Output:

 

 

 

 

For more Examples Related CSS,html and Java Script Visit on Coding Academics

For Web,Java and Assembly language related Semester Projects please Visit on Programming Zone.

Leave a Reply

Your email address will not be published. Required fields are marked *