Css border and outline properties


Published on

Published in: Education
  • Be the first to comment

Css border and outline properties

  1. 1. Unit III: Adding Stylesand Interactivity Using CSS and Javascript
  2. 2.  When point moves it was then known as_______? What line is used to show the outline part of an object when drawn? What is the longest border in the world? Which of the following letter is solid, and which is outlined.a. R b .R
  3. 3. The CSS border properties specify the borders around an element.The CSS outline properties specify the outline around an element.
  4. 4. PR0PERTY DESCRIPTION EXAMPLEborder-style Sets the width of borders/outline h1{border-style: solid;}outline style to dotted, dashed, solid, h1{outline-style: double, groove, ridge, inset, dashed;} outset or none.border-width Sets the width of borders to thin, body{border-style:outline-width medium, thick or any numeric dashed; border-width: value in pixels, like 20px thick;} body{outline-style: dashed; outline-width: thick;}border-color Defines the color of the border h1{border-style: dotted;outline-color (the borders should be set first border-width: thin; using the border-style property) border-color: red;} h1{outline-style: dotted; outline-width: thin; outline-color: red;}border Sets all the border/outline h1{border: mediumoutline properties in one declaration. ridge, blue;} h1{outline: medium, ridge, blue;}
  5. 5. PROPERTIES DESCRIPTION EXAMPLEBorder-top-style Sets the style, width, color of the h1{border-top-style: dotted;}Border-top-width top border. h1{border-top-width: thin;}Border-top-color h1{border-top-color: blue;} Sets the properties of the top h1{border-top: thin dotted blue;} border in one declarationBorder-topBorder-right-style Sets the style, width, color of the h1{border-right-style: dotted;}Border-right-width right border. h1{border-right-width: thin;}Border-right-color h1{border-right-color: blue;} Sets the properties of the rightBorder-right h1{border-right: thin dotted blue;} border in one declarationBorder-bottom-style Sets the style, width, color of the h1{border-bottom-style: dotted;}Border-bottom- bottom border. h1{border-bottom-width: thin;}width h1{border-bottom-color: blue;} Sets the properties of the bottomBorder-bottom- h1{border-bottom: thin dotted border in one declarationcolor blue;}Border-bottomBorder-left-style Sets the style, width, color of the h1{border-left-style: dotted;}Border-left-width left border. h1{border-left-width: thin;}Border-left-color h1{border-left-color: blue;} Sets the properties of the leftBorder-left h1{border-left: thin dotted blue;} border in one declaration
  6. 6. Syntax border-image: source slice width outset repeat;Value Descriptionborder-image- The path to the image to be used as a bordersourceborder-image-slice The inward offsets of the image-borderborder-image- The widths of the image-borderwidthborder-image- The amount by which the border image area extendsoutset beyond the border boxborder-image- Whether the image-border should be repeated,repeat rounded or stretched
  7. 7. Text-shadow properties: CSS3 Syntax p{text-shadow: 2px 2px 8px red;} Value Descriptionh-shadow Required. The position of the horizontal shadow. Negative values are allowedv-shadow Required. The position of the vertical shadow. Negative values are allowedblur Optional. The blur distancecolor Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
  8. 8. 1. Set thin borders to header 1.2. Set green border to header 13. Set a 30 pixels size of border to header 1.4. Set a solid border to a paragraph.5. Set a thick top border to a paragraph.6. Set a red left border in header 2.7. Set a dotted right border in a paragraph.8. Set a blue outline to header 19. Set an outset border in a header 2.10. Set a green bottom border in a paragraph
  9. 9. 1. h1{border-width: thin;}2. h1{border-color: green;}3. h1{border-width: 30px;}4. p{border-style: solid;}5. p{border-top-width: thick;}6. h2{border-left-color: red;}7. p{border-right-style: dotted;}8. h1{outline-color: blue;}9. h2{border-style: outset;}10. p{border-bottom-color: green;}