Skip to main content

Get To Know Border Style - CSS

More options to border-style than solid or dotted. Check out the demo below.

DEMO

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

HTML

<div class="wrapper-border">
  <div class="tile border-none">none</div>
  <div class="tile border-hidden">hidden</div>
  <div class="tile border-dotted">dotted</div>
  <div class="tile border-dashed">dashed</div>
  <div class="tile border-solid">solid</div>
  <div class="tile border-double">double</div>
  <div class="tile border-groove">groove</div>
  <div class="tile border-ridge">ridge</div>
  <div class="tile border-inset">inset</div>
  <div class="tile border-outset">outset</div>
</div>

CSS

.wrapper-border {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 1em;
}

.wrapper-border .tile {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: LightYellow;
  border-color: Crimson;
  border-width: 5px;
}

.wrapper-border .border-none {
  border-style: none;
}

.wrapper-border .border-hidden {
  border-style: hidden;
}

.wrapper-border .border-dotted {
  border-style: dotted;
}

.wrapper-border .border-dashed {
  border-style: dashed;
}

.wrapper-border .border-solid {
  border-style: solid;
}

.wrapper-border .border-double {
  border-style: double;
}

.wrapper-border .border-groove {
  border-style: groove;
}

.wrapper-border .border-ridge {
  border-style: ridge;
}

.wrapper-border .border-inset {
  border-style: inset;
}

.wrapper-border .border-outset {
  border-style: outset;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }
Post a Comment
Read more

Input Range with CSS

  Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }
Post a Comment
Read more