Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
2
Question by whaleinthesea · Aug 24, 2015 at 12:46 PM · guibuttonroundingcorner

How to make a button with rounded corners?

How can I make a button with rounded corners.

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

4 Replies

· Add your reply
  • Sort: 
avatar image
9
Best Answer

Answer by Josh_He · Jan 11, 2016 at 07:57 AM

I made a Unity Package for doing such things very fast and directly in Unity. And you're also able to animate the border-radius and border-width.
AssetStore link: http://u3d.as/mYk

Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Fattie · Jan 20, 2016 at 03:39 AM 0
Share

FANTASTIC !!!!!!!!!!!!!

BUY THIS ASSET I$$anonymous$$$$anonymous$$EDIATELY !

It's so good !!!!

avatar image jspivack · May 01, 2018 at 07:27 PM 0
Share

You are a golden god. These are the kinds of UI tools that should have come with Unity out of the box.

avatar image
5

Answer by VildNinja · Aug 24, 2015 at 12:52 PM

Create an image with rounded corners (and blank in the center). Import as sprite, slicing it up so the corners do not get stretched (drag the green lines). http://i.imgur.com/6qwCT9j.png

Set it as image for the Button http://i.imgur.com/gB5VtRY.png

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image whaleinthesea · Aug 24, 2015 at 12:58 PM 0
Share

Is there an other way to do that?

avatar image VildNinja · Aug 24, 2015 at 02:01 PM 0
Share

Unity already has gfx with slightly rounded corners for the default UI. But otherwise you'll probably need some vector tool, or just a pack of premade assets. Check the Assest store. There is NO css for the Unity UI if that's what you're asking.

avatar image tiddles451 · Nov 18, 2020 at 10:19 AM 0
Share

Documentation link that explains this approach more: https://docs.unity3d.com/2019.2/Documentation/$$anonymous$$anual/9SliceSprites.html

avatar image
3

Answer by paulwhowrites · Mar 23, 2020 at 07:07 PM

By far the easiest way I've ever found is to just make the button in PowerPoint (rounded corners or whatever design you want), then right click, save as image, drag and drop into unity. Lastly, in the inspector change the Texture Type to sprite (2D and UI) and assign it as the Source Image for your button. Beautifully rounded buttons in just 5 minutes:)

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
1

Answer by vElumi · Jul 30, 2020 at 02:26 PM

In case you want procedurally generated mesh:

 public class RoundedButton : MonoBehaviour {
     [SerializeField] private float width;
     [SerializeField] private float height;
     [SerializeField] private float borderRadius;
 
     [SerializeField] private MeshFilter meshFilter;
 
     [Button]
     private void GenerateMesh() {
         var w = width * .5f;
         var h = height * .5f;
 
 
         var vertices = new Vector3[91 * 4];
         var j = 0;
         for (var startAngle = 0; startAngle < 360; startAngle += 90) {
             var p = new Vector3((w - borderRadius) * (startAngle == 0 || startAngle == 270 ? 1 : -1),
                 (h - borderRadius) * (startAngle < 180 ? 1 : -1));
             for (var i = startAngle; i <= startAngle + 90; i++) {
                 var a = i * Mathf.Deg2Rad;
                 vertices[j++] = p + new Vector3(Mathf.Cos(a), Mathf.Sin(a)) * borderRadius;
             }
         }
         
         var triangles = new int[90 * 3 * 4 + 18];
 
         for (var o = 0; o < 4; o++) {
             var offset = o * 90;
             var aoff = o * 91;
             triangles[offset * 3] = aoff;
             triangles[1 + offset * 3] = 90 + aoff;
             triangles[2 + offset * 3] = 89 + aoff;
 
 
             for (var i = 3; i < 90 * 3; i += 3) {
                 triangles[i + offset * 3] = aoff;
                 triangles[i + 1 + offset * 3] = triangles[i - 1 + offset * 3];
                 triangles[i + 2 + offset * 3] = triangles[i - 1 + offset * 3] - 1;
             }
         }
 
         var remaining = new[] {
             0, 91, 90,
             91, 182, 181,
             182, 273, 272,
             273, 0, 363,
             273, 91, 0,
             273, 182, 91
         };
 
         for (var i = 0; i < 18; i++) triangles[90 * 3 * 4 + i] = remaining[i];
 
 
         meshFilter.mesh = new Mesh {vertices = vertices, triangles = triangles};
     }
 
     private void OnValidate() {
         if (meshFilter == null)
             meshFilter = GetComponent<MeshFilter>();
 
         GenerateMesh();
     }
 }
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image frankyiu2010 · Feb 21, 2021 at 02:39 AM 0
Share

How can I apply this script ?

I created a script file and copy the code , attached it in a button object, but no rounded corner show, can you help ? thank you so much

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

34 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

I have doubt please help me 2 Answers

GUI.Button press (not click) 3 Answers

GUI Button to create another GUI 1 Answer

Why this simple code doesnt work? 0 Answers

Gui.Button Image in Button - error 1502 and 1503 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges