PS Web Concepts

Wednesday 5 October 2022

Border Css

Box Shadow : https://getcssscan.com/css-box-shadow-examples

Demo : https://css-tricks.com/almanac/properties/b/border/

body {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2em;
}

.box {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 17%;
  height: 200px;
  margin-bottom: 1em;
}

.box-1 {
  border: none;
}

.box-2 {
  border: 5px hidden red;
}

.box-3 {
  border: 5px solid orange;
}

.box-4 {
  border: 5px dashed orange;
}

.box-5 {
  border: 5px dotted orange;
}

.box-6 {
  border: 5px double orange;
}

.box-7 {
  border: 5px groove orange;
}

.box-8 {
  border: 5px ridge orange;
}

.box-9 {
  border: 5px inset orange;
}

.box-10 {
  border: 5px outset orange;
}