Front-endTools

CSS Border Generator

It is a CSS automatic generation tool for adding a border.
In addition to being able to specify up, down, left and right individually, you can also generate dotted lines, dashed lines, double lines, and three-dimensional lines (groove / ridge / isnet / outset). increase. You can also specify the preview size (width / height) and rounded corners (border-radius)

Sample list. Select the one that most closely matches the image of what you want to make. It is possible to edit after selecting.

Please note that when you select the example in the sample list, any data being edited will be overwritten.
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
border
.original-border {
  width: 280px;
  height: 100px;
  background-color: #eeeeee;
  border: 5px solid #333333;
}

Style editor

Other specifications

How to use the tool

・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

List of generators

List of other Tools