CSE 154 Examples

Border Property

A Border is an enclosure around any content we want on our webpage. There are several border properties we can change using CSS. Some of these are :

• Border Width - Specify how wide the border around an element is.
• Border Style - Specify the type of border around an element eg. Dotted, solid, etc.
• Border Color - Specify the color of the border around an element.
• Border Property - A shorthand representation which allows you to set border width, style and color at the same time.
• Border Radius - Specify how curved the ends of the border will be.

              
                  element {
                    border-width: value (in px, pt, em, cm, etc.)
                  }

                  p {
                    border-width: 2px;
                  }
              
            

              
                  element {
                    border-style: name_of_style;
                  }

                  p {
                    border-style: dotted;
                  }
              
            

              
                  element {
                    border: border_width, border_color, border_type;
                  }

                  p {
                    border: 2px black solid;
                  }
              
            

              
                  element {
                    border-color: color (in hex, rgb, name, etc);
                  }

                  p {
                    border-color: black;
                  }
              
            

              
                  element {
                    border-radius: value(in em, px, pt, cm, etc.);
                  }

                  p {
                    border-radius: 5px;
                  }