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

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

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

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...
Post a Comment
Read more