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.

Lots more videos on Website!

List of generators

List of other Tools

Description of each CSS property

border
The border property allows you to set a border (element boundary) on an element.
Each value (value) can be specified as follows
border: border widthborder typeborder color
Example description) border: 1px solid #333
Incidentally, the order of the values does not matter; the initial value of border is none.
Each value can also be specified individually, for example
  • border-width
  • border-style
  • border-color
properties.
Example description) border-width: 10px;
Example description) border-style: solid;
Each of these can also be oriented.
Example of border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
Example of border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
Example of border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
In addition to solid, the following values can be specified for border-style.
  • double. Two straight lines (double lines) are displayed and the total width is the px size specified in border-width.
  • groove. It is displayed as a three-dimensional depressed line.It is the reverse of ridge.
  • ridge.It appears as a three-dimensional raised line, the opposite of groove.
  • inset. The top and left lines will appear darker, the bottom and right lines will appear lighter, and the entire image will appear as if it is three-dimensionally depressed. This is the opposite of outset.
  • outset. The top and left lines will appear lighter, while the bottom and right lines will appear darker, giving the appearance of three-dimensional ridges. The opposite is true of inset.
  • dashed. Displays a dashed line. Displays a series of dashes or line segments with short, square corners.
  • dotted. It is displayed as a dotted line. Specifically, it displays a series of round dots. The radius of the dots is half of the calculated border-width of the same edge.
Note, however, that dotted, dashed, etc. may be rendered differently in different browsers.
You can also define the direction in which the border is to be specified.
  • border-top
  • border-bottom
  • border-right
  • border-left
Example description) border-left: 10px solid #333;
border-radius
The border-radius property allows you to round the corners of an element.
Setting one radius results in circular corners; setting two radiuses results in elliptical corners.
The value can be specified in units of px, em, %, etc. and can be specified as follows
Example description) border-radius: 5px;
Initial value is 0.
Each of the four locations (upper left, upper right, lower right, and lower left) can also be specified with the following properties
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
Example description) border-top-left-radius: 10px;
color
When specifying colors on the Web, "HEX," "RGB," and "HSL" are often used.
First of all, HEX, which you see most often (hexadecimal number), is a way of expressing colors in hexadecimal. It is expressed in the form of #1234ab.
The six digits after # are the values of red (1st~2nd digits), green (3rd~4th digits), and blue (5th~6th digits). Various colors are represented according to the color intensity of each value.
If each of the two digits is the same value, a three-digit expression can be used. For example, #aa9933 can be represented as #a93.
If you want to specify the transparency in hexadecimal, you can use an 8-digit number, with the 7th to 8th digits also in hexadecimal. 80% transparency can be specified with #aa9933CC, for example.
RGB, like HEX, is capable of representing colors in red, green, and blue.
Each value can be specified in the range 0 ~ 255 and is represented as rgb(red value, green value, blue value).
Example description) rgb(10, 50, 220)
If you want to specify transparency, you can use rgba(red value, green value, blue value, transparency(alpha)).
The alpha value can be specified in the range 0~1, for example rgba(0, 0, 255, .5).
HSL stands for Hue, Saturation, and Lightness.
When specifying colors in HSL, colors are specified using these three elements. Once the hue (type and shade of color) is determined, colors can be determined by adjusting saturation and lightness, which is more intuitive than RGB.
The following can be specified: hsl(hue, saturation, lightness)
  • Hue:Basically, you can specify a number between 0 and 360. If you specify a number beyond this range, it will be considered as a circumference, so for example, if you specify 380, it will be the same as 20.
  • Lightness:You can specify a value between 0 and 100%; the closer to 100%, the brighter the image. Conversely, the closer the value is to 0%, the darker it becomes.
If you want to specify transparency, there is hsla. Like rgba, the final a represents the alpha (transparency).
alpha values can be specified from 0 to 1, for example, hsla(80, 80%, 50%, .5).