The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. The source for this interactive example is stored in a GitHub repository. This property is a shorthand to set the four properties border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusand border-bottom-left-radius.
The radius applies to the whole backgroundeven if the element has no border; the exact position of the clipping is defined by the background-clip property. The border-radius property does not apply to table elements when have shared or separate borders. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.
Get the latest and greatest from MDN delivered straight to your inbox. Sign in to enjoy the benefits of an MDN account. Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inheritwhich would partially override existing definitions.
Instead, the individual longhand properties have to be used. The compatibility table in this page is generated from structured data. Last modified: Apr 4,by MDN contributors.
CSS Border Transition Effects On Hover | Border Hover Animation
CSS CSS Reference CSS Backgrounds and Borders Guides Resizing background images with background-size Using multiple backgrounds Properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow.
Learn the best of web development Get the latest and greatest from MDN delivered straight to your inbox. The newsletter is offered in English only at the moment. Sign up now. Sign in with Github Sign in with Google. Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
It is used only in the one-value syntax. It is used only in the two-value syntax. It is used only in the two- and three-value syntaxes. It is used only in the three- and four-value syntaxes. It is used only in the four-value syntax. The behavior on internal table elements is undefined for the moment. It also applies to ::first-letter. Full support 1 Prefixed Prefixed Implemented with the vendor prefix: -webkit. Firefox Full support 4 Notes Full support 4 Notes Notes Prior to Firefox 50, border styles of rounded corners with border-radius were always rendered as if border-style was solid.
This has been fixed in Firefox Firefox 4 also makes rounded corners clip content and images if overflow : visible is not set. IE Full support 9.Learn Development at Frontend Masters. Simple examples:. This is the correct way to do it. Border radius is a particularly good example of why we do it that way.
How TO - Circles
Learn more about this scenario. To prevent this you use background-clip:. With just one value, border-radius will the same on all four corners of an element. But that need not be the case. You can specifiy each corner separatedly if you wish:. If one value is set, this radius applies to all 4 corners. If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-lefttop-rightbottom-rightbottom-left corner in that order. Three values: The second value applies to top-right and also bottom-left. You may also specify the radiuses in which the corner is rounded by.Curved/Custom DIV Shape Tutorial - CSS & SVG
Note: Firefox only supported elliptical borders in 3. You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle or elipse shapebut can be used any time you want the border radius to be directly correlated with the elements width. Note: In Safari percentage values for border-radius only supported in 5.
In Opera, only supported in This browser support data is from Caniusewhich has more detail. A number indicates that browser supports the feature at that version and up. Frontend Masters is the best place to get it. Hello, I indeed absolutely needed some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:. The x and y position of the shadow are 0 so the shadow is centered, all wee need is to adjust the blur value expanding it just 1px in base of need above the corner edges making them look smoother.
There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look slightly less sharper. Now, if you are the type of designer that can use small compromises, it should just work for you like this, but if you are a finicking freak like I am, you should absolutely find a way to target your CSS to specific devices.
Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer. Nice tutorial. Aptly explained. You went beyond most other tutorials and explained things others only dream about. HiI am trying to apply border-radius to div,which have border with gradient color. But it is not allowing me to apply border-radius.
Thanks for the tutorial!The border-radius property defines the radius of the element's corners. Four values - border-radius: 15px 50px 30px 5px; first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner :. Three values - border-radius: 15px 50px 30px; first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner :.
Two values - border-radius: 15px 50px; first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners :. One value - border-radius: 15px; the value applies to all four corners, which are rounded equally:. Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
If top-right is omitted it is the same as top-left. If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. Default value: 0 Inherited: no Animatable: yes. Property border-radius 5. Value Description Play it length Defines the shape of the corners.
Copyright by Refsnes Data.
All Rights Reserved. Powered by W3. Read about animatable Try it. Defines the shape of the corners. Read about length units.
Sets this property to its default value. Read about initial.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Every guide I find has the line and fill the same colour. All I want is a circle with a red line and white fill.
You forgot to set the width of the border!
Change border: red; to border:1px solid red. You are missing the border width and the border style properties in the Border shorthand property :. Side note : In your example, you didn't specify the border-radius property without vendor prefixes whitch you propably don't need as only browsers before chrome 4 safari 4 and Firefox 3. Here is a jsfiddle so you can see an example of this working. Learn more. Asked 4 years, 5 months ago. Active 1 year, 7 months ago. Viewed 96k times.
I have tried:. Stre Stre 1 1 gold badge 3 3 silver badges 12 12 bronze badges. Active Oldest Votes. Change border: red; to border:1px solid red; Here the full code to get the circle:. Sebastian Brosch Sebastian Brosch 33k 13 13 gold badges 53 53 silver badges 65 65 bronze badges. Try this:.
Nalan Madheswaran Nalan Madheswaran 6, 1 1 gold badge 40 40 silver badges 32 32 bronze badges. Sebastian Brosch 33k 13 13 gold badges 53 53 silver badges 65 65 bronze badges. Ya Zhuang Ya Zhuang 4, 26 26 silver badges 39 39 bronze badges.
Florin Pop Florin Pop 4, 2 2 gold badges 18 18 silver badges 51 51 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Socializing with co-workers while social distancing. Podcast Programming tutorials can be a real drag. Featured on Meta.
Community and Moderator guidelines for escalating issues via new response….The border-top-left-radius CSS property rounds the top-left corner of an element. The source for this interactive example is stored in a GitHub repository. The rounding can be a circle or an ellipse, or if one of the value is 0, no rounding is done and the corner is square. A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size. The border-radius-related CSS properties: the CSS shorthand border-radiusthe properties for the other corners: border-top-right-radiusborder-bottom-right-radiusand border-bottom-left-radius.
Get the latest and greatest from MDN delivered straight to your inbox. Sign in to enjoy the benefits of an MDN account. If the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius CSS property, the value of this property is then reset to its initial value by the shorthand property. The compatibility table in this page is generated from structured data. Prefixed Disabled.
Last modified: Mar 23,by MDN contributors. Related Topics. CSS CSS Reference CSS Backgrounds and Borders Guides Resizing background images with background-size Using multiple backgrounds Properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow.
Learn the best of web development Get the latest and greatest from MDN delivered straight to your inbox. The newsletter is offered in English only at the moment. Sign up now. Sign in with Github Sign in with Google. The behavior on internal table elements is undefined for the moment.A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern.
There's another common shape that's easy to create, and that is the circle. Using border-radius, you can create wonderful CSS circles. It's really that simple CSS circles don't immediately appear as useful as CSS triangles, but they surely have value within design.
An animated set of circles could act as a loading animation; creative use of the circle is up to you.
How to make rounded images with CSS
Animations using this method can run at 60 fps and deliver fantastic As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.
The MooTools in my article contained a lot of conditional code to require correct dropping per the game and many people requested that I simplify the process and just They do if you want to make a circle, but if not, you get an ellipse also useful.
Although I have never had any problems with percentages. Ha ha! I am a few years late for this one, but glad I finally stumbled upon it!
Safari win v 5. Thank you. However, I have one other question left. How can you create the circle image and add a hyperlink to a site you want viewers to look at? Thank you so much for this article. I am using them as a background for x on my close buttons. They sit neatly at one corner of my forms. The circle makes the x look more complete.The main CSS property responsible for the effect is border-radius.
View Demo. Download Source. This technique works best on square images. To work around the problem, we can wrap the img element in a square div element. So that the subject of the photo is less likely to get cropped out, we also have to treat landscape photos which are horizontally-oriented rectangles differently from portrait photos which are vertically-oriented rectangles.
The width and height property values must be the same so that the wrapper div. In addition, the width and height property values must be equal to or less than the height of the img. This makes sure the img element is able to occupy the wrapper div without being stretched out. Generally, the subject of landscape photos will — but not always — be located around the center of the composition.
We can accomplish this by setting the margin-left property of the img element to a negative value:. The assumption that the subject of the photo will be close to the center of the composition is not always going to be true. Similar to landscape photos, the wrapper div of portrait-oriented img elements must have equal width and height property values so that the wrapper is a perfect square. We did the opposite for landscape-oriented images.
This technique is best used on square img elements, with the subject located dead-center of the photo. The main CSS property responsible for the circular shape is the border-radius property. Jacob Gube is the founder of Six Revisions. Connect with him on Twitter. We've driven 6, leads for clients in the last five years. Share this article: Return to top.