Scribd
Upload
38 views2 pages

CSS 1. Borders: Border

The document discusses CSS borders and padding. It lists the different border styles that can be set like dotted, dashed, solid, and none. It also shows how to set individual padding on each side of an element using properties like padding-top, padding-right, etc. Height and width can be set to auto, a specific length, percentage, initial or inherit values.

Uploaded by

Ana Mtfk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views2 pages

CSS 1. Borders: Border

The document discusses CSS borders and padding. It lists the different border styles that can be set like dotted, dashed, solid, and none. It also shows how to set individual padding on each side of an element using properties like padding-top, padding-right, etc. Height and width can be set to auto, a specific length, percentage, initial or inherit values.

Uploaded by

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

CSS

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

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

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;}
border-style: groove;

border-width: medium;
border-color: black;
2. Padding

CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

CSS Height and Width


 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value

You might also like