CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Questions

What is Bootstrap CSS What is CSS used for How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language How to edit CSS in WordPress How to use google fonts in CSS How to create blinking text using CSS How to Set Space between the Flexbox Is CSS a Programming Language

Difference

Difference between HTML and CSS Grid Vs Flexbox in CSS Difference between CSS Grid and CSS Flexbox

Misc

Create a 3D text effect using HTML and CSS Hover condition for a:before and a:after in CSS Bem CSS Boder Types CSS Features of CSS Font Face CSS Image Overlay CSS B Tag CSS Carousel CSS CSS Arrow CSS Focus Flex Grow in CSS Bem CSS Features of CSS Font Face CSS

CSS Border

CSS Border: The border property of CSS allows us to define the style, color, width, and radius of the element’s border. It is applied to various elements to set-up the border. Some essential properties of CSS border are as follows:

  • border-style
  • border-width
  • border-color
  • border-radius

CSS border-style

A border-style CSS property is applied to define the type of border which we want to present inside various web pages. Some of the essential style values are permitted in this property, which is as follows:

  1. dotted: This value is used to specify the dotted border.
  2. dashed: This value is used to specify the dashed border.
  3. double: This value is used to define two borders along with a similar border-width value.
  4. groove: This value is used to specify the 3D grooved border. Its effect leans on the value of border-color.
  5. hidden: This value is used to specify the hidden border.
  6. inset: This value is used to specify the 3D inset border. Its effect leans on the value of border-color.
  7. none: This value is used to specify no border.
  8. out set: This value is used to specify the 3D out set border. Its effect leans on the value of border-value.
  9. ridge: This value is used to specify the 3D ridged border. Its effect leans on the value of border-color.
  10. solid: This value is used to specify the solid border.

This property of CSS may have one to four values. These values are left border, right border, top border, and the bottom border.

Example:

 <!DOCTYPE html>
  <html> 
  <head> 
  <style>   p.dotted {border-style: dotted;}   p.dashed {border-style: dashed;}   p.double {border-style: double;}   p.groove {border-style: groove;}   p.hidden {border-style: hidden;}   p.inset {border-style: inset;}   p.none {border-style: none;}   p.outset {border-style: outset;}   p.ridge {border-style: ridge;}   p.solid {border-style: solid;}   </style>
   </head>  
 <body>  
 <p class="dotted">Dotted   Border.</p>  
 <p class="dashed">Dashed   Border.</p> 
  <p class="double">Double   Border.</p> 
  <p class="groove">Groove   Border.</p>  
 <p class="hidden">Hidden   Border.</p> 
  <p class="inset">Inset Border.</p> 
  <p class="none">No Border.</p>  
 <p class="outset">Outset   Border.</p>  
 <p class="ridge">Ridge   Border.</p>  
 <p class="solid">Solid   Border.</p> 
  </body>  
 </html>    
CSS Border

CSS border-width

The CSS border-width property is applied on the web pages to fix the width of the border. It can be set-up in pixels. We can also use the three values to set-up the border-width property, which is as follows:

  • Thin
  • Medium
  • Thick

This property can’t be applied alone. It is always applied with other properties, if borders such as “border-style” are used for setting the border. Otherwise it will be useless.

Example:

 <DOCTYPE html>
   <html>
   <head>
   <style>   p.one {   border-style: solid;   border-width: 6px;   }   p.two {   border-style: solid;   border-width: medium;   }   p.three {   border-style: solid;   border-width: 2px;   }   p.four {   border-style: solid;   border-width: thick;   }   p.five {   border-style: solid;   border-width: 6px 10px; /*Some particular Side widths*/   }   </style>
   </head>   
<body> 
  <p class="one">This is an example to   set the border width.</p>
   <p class="two">This is an example to   set the border width.</p> 
 <p class="three">This is an example to   set the border width.</p> 
  <p class="four">This is an example to   set the border width.</p> 
  <p class="five">This is an example to   set the border width.</p> 
  </body>  
 </html>  
CSS Border

CSS border-color

The CSS border-color is applied to set the border’s color. Here, we can do this by one the following three types:

  • Name: This method is used to define a color name. For-example: “green”.
  • RGB: This method is used to define the color’s RGB value. For-example: “rgb(255,0,0)”.
  • HEX: This method is used to define the color’s hex value. For-example: “#ff0000”.
  • Transparent: When the color of the border is not fixed then it inherits through its element’s color property.

This property can’t be applied alone. It must be applied along with other properties like “border-style”.

Example:

 <!DOCTYPE html>
   <html>
   <head>
   <style>   p.color1 {   border-style: solid;   border-color: green;   }   p.color2 {   border-style: solid;   border-color: #ff0000;   }   p.color3 {   border-style: solid;   border-color: rgb(255,0,0);   }   p.color4 {   border-style: solid;   border-color: blue red green yellow;   }   </style>   </head>   
<body>   
<p class="color1">Green   Border.</p>   
<p class="color2">Red Border.</p>   
<p class="color3">Red Border.</p>   
<p class="color4">Mix color   Border.</p>   
</body>   
</html> 
CSS Border