Scribd
Upload
6 views

3-CSS Border-Outline

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

3-CSS Border-Outline

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
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