Scribd
Upload
11 views

3-CSS Border-Outline

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

3-CSS Border-Outline

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

1 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Border Properties

 The CSS border properties allow you to specify the style, width, and color
of an element's border.
 Syntax :
border : [border-width] [border-style] [border-color]

1. Border-width :
 The border-width property sets the width of an element's four borders.
 Syntax:
border-width : medium | thin | thick | length;

 If the border-width property has four values:

 border-width: thin medium thick 10px;


o top border is thin
o right border is medium
o bottom border is thick
o left border is 10px

 If the border-width property has three values:


 border-width: thin medium thick;
o top border is thin
o right and left borders are medium
o bottom border is thick

 If the border-width property has two values:


 border-width: thin medium;
o top and bottom borders are thin
o right and left borders are medium

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


2 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

 If the border-style property has one values:


 border-width: thin;
- all four borders are thin

 border-top-width: 10px;
 border-bottom-width: 10px;
 border-left-width: 10px;
 border-right-width: 10px;

2. Border-style :
 The border-style property sets the style of an element's four borders.
 Syntax :
border-style: none | hidden | dotted | dashed | solid | double
groove | ridge | inset | outset;

 If the border-style property has four values:
 border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

 If the border-style property has three values:


 border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double

 If the border-style property has two values:


 border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


3 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

 If the border-style property has one values:


 border-style: dotted;
- all four borders are dotted

 border-top-style: dotted;
 border-bottom- style: dashed;
 border-left- style: double;
 border-right- style: solid;

3. border-color :
 The border-color property is used to set the color of the four borders.
 Syntax:
border-color: color | transparent;
 If the border-color property has four values:
 border-color: red green blue pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink

 If the border-color property has three values:


 border-color: red green blue;
o top border is red
o right and left borders are green
o bottom border is blue

 If the border-color property has two values:


 border-color: red green;
o top and bottom borders are red
o right and left borders are green

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


4 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

 If the border-color property has one value:


 border-color: red;
- all four borders are red

 border-top-color: red;
 border-bottom- color: green;
 border-left- color: blue;
 border-right- color: cyan;

CSS Border Radius Properties


 The border-radius property defines the radius of the element’s corners.
 Syntax:
border-radius: length | % ;
 If the border-radius property has four values:
 border-radius: 5px 10px 20px 15px;
o 5px – top left corner
o 10px – top right corner
o 20px – bottom right corner
o 15px – bottom left corner

 If the border-radius property has three values:


 border-radius: 10px 20px 15px;
o 10px – top left corner
o 20px – top right and bottom left corner
o 15px – bottom right corner

 If the border-radius property has two values:


 border-radius: 10px 20px;
o 10px – top left and bottom right corner
o 20px – top right and bottom left corner

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


5 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

 If the border-radius property has one value:


 border-radius: 20px;
- all four corners

CSS Outline Properties

 The CSS outline properties is a line that is drawn around elements,outside


the borders,to make the element stand out.
 Syntax :
outline : [outline-width] [outline-style] [outline-color] ;

1. outline-width :
 The outline-width property specifies the width of an outline.
 Syntax:
outline-width : medium | thin | thick | length;
2. outline-style :
 The outline-style property specifies the style of an outline.
 Syntax:
outline-style: none | hidden | dotted | dashed | solid | double
groove | ridge | inset | outset;
3. outline-color :
 The outline-color property specifies the color of an outline.
 Syntax:
outline-color: color ;

 outline-offset :
 The outline-offset property adds space between the outline and border
of an element.
 Syntax:
outline-offset: length ;

CREATIVE DESIGN & MULTIMEDIA INSTITUTE

You might also like