На русском
Blog

CSS3/SASS object generator

Templates
CSS
SASS
All prefixes
Copy hover to orig
Original
Hover
Copy orig to hover
General parameters
Cursor
Object width
Object height
Object padding
Padding top
Padding right
Padding bottom
Padding left
Object width
Width unit
Object height
Height unit

Border

Border style
Border width
Border unit
Border color

Background

Background
Repeat
Attachment
X position
Y position
Back-nd width
Back-nd height
Gradient generator
About gradient generator
Opacity
Location
Color
Location
Direction
linear
radial
Hue
Saturation
Lightness
Border radius
About border radius generator

What is CSS3 border radius generator?

This tool allows to make the corners of an object round (circular) with the means of CSS3. In this tool you will be provided 1 input to change the size of all corner circles and 4 more text fields for each separate corner. To change it simply click on the text field and enter a desired radius in pixels on your keyboard or push your left mouse button on an input and drag it up and down to modify it's value.

Note: in order for any generator to work, make sure the box next to a generator name is ticked

Browser compatibility

Property Google Chome compatibility Mozilla Firefox compatibility Opera compatibility Microsoft Internet Explorer compatibility Safari compatibility Yandex browser compatibility
border-radius 5.0+
4.0 -webkit-
4.0+
3.0 -moz-
10.5+ 9.0+ 5.0+
3.1 -webkit-
1.5+
Border radius

Separate corners

Left top
Right top
Right bottom
Left bottom
Text (shadow & general)
About text shadow generator
Font family
Font style
Font size
Font size unit
Font color
Text align

Text shadow

Shadow color
Left offset (px)
Top offset (px)
Blur (px)
Shadow opacity
Box shadow
About box shadow generator
Horizontal offset
Vertical offset
Blur radius
Spread radius
Shadow color
Shadow opacity
inset
outline
Transform
About transform generator
Scale X
Scale Y
Translate X (px)
Translate Y (px)
Skew X
Skew Y
Rotate
Transition
About transition generator
Property
Duration
Duration unit
Function
x

Gradient templates

Button templates

Pink button
Yellow button
Glass button
Dark button
IPhone button
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON